ElementUI之动态树+数据表格+分页1

简介: ElementUI之动态树+数据表格+分页1

目录

前言

一.ElementUI之动态树

1.前端模板演示

2.数据绑定

2.1 通过链接获取后台数据

2.2 对链接进行绑定

2.3添加动态路由

2.4 配置路由

3.效果演示

二.数据表格+动态分页

1.前端模板

2.通过JS交互获取后端数据

3 效果演示


前言

Element UI 是一个基于 Vue.js 的开源前端框架,用于构建用户界面。它提供了一套丰富的 UI 组件和工具,可以帮助开发者快速构建现代化的 web 应用程序。

官网:Element - 网站快速成型工具

一.ElementUI之动态树

1.前端模板演示

我们可以在官网-组件进行搜索:侧栏,就可以看到一个左侧的动态树

选择查看下面的代码进行复制

这里可以提供一段,当然,这只是一段模板,可以根据自己需求填写相关的信息

<el-menu>
  <el-submenu index="" key="">
        <template slot="title">
            <i class=""></i>
            <span></span>
        </template>
    <el-menu-item index="" key="">
            <i class=""></i>
            <span></span>
        </el-menu-item>
  </el-submenu>
</el-menu>

2.数据绑定

2.1 通过链接获取后台数据

在对于的页面中编写方法请求数据地址并发起请求,绑定左侧菜单栏

export default {
    data() {
      return {
        collapsed: false,
        menu:[]
      }
    },
    created() {
      this.$root.bus.$on('shrink', t => {
        this.collapsed = t;
      });
      //获取后台请求数据的地址
      let url = this.axios.urls.SYSTEM_MENU;
      this.axios.get(url, {}).then(d => {
          this.menu=d.data.rows;
      }).catch(e => {});
    }
  }

2.2 对链接进行绑定

在api包中的action.js文件中进行绑定访问的链接地址

export default {
  'SERVER': 'http://localhost:8080/', //服务器
  'SYSTEM_USER_DOLOGIN': 'user/userLogin', //登陆
  'SYSTEM_USER_DOREG': 'user/userRegister', //注册
  'SYSTEM_MENU': 'module/queryRootNode', //注册左侧菜单树
  'getFullPath': k => { //获得请求的完整地址,用于mockjs测试时使用
    return this.SERVER + this[k];
  }
}

2.3添加动态路由

在我们要跳转的菜单栏添加动态路由

<el-menu router :default-active="$route.path">
  <el-menu-item index="/company/userManager">用户管理</el-menu-item>
</el-menu>

根据情况创建对应的目录结构,并创建相应的跳转页面示例:

2.4 配置路由

在router/index.js中配置

 {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children:[{
      path: '/LeftNav',
      name: 'LeftNav',
      component: LeftNav
    },
    {
      path: '/TopNav',
      name: 'TopNav',
      component: TopNav
    },
    {
      path: '/book/AddBook',
      name: 'AddBook',
      component: AddBook
    },
    {
      path: '/book/BookList',
      name: 'BookList',
      component: BookList
      }]
    },

3.效果演示

目录
相关文章
|
数据库
ElementUI动态树,数据表格以及分页的实现
ElementUI动态树,数据表格以及分页的实现
|
前端开发 JavaScript
ElementUI之动态树+数据表格+分页2
ElementUI之动态树+数据表格+分页2
144 0
|
SQL 前端开发 JavaScript
ElementUI之动态树+数据表格+分页
ElementUI之动态树+数据表格+分页
83 0
|
SQL 前端开发 API
关于ElementUI之动态树+数据表格+分页实例
关于ElementUI之动态树+数据表格+分页实例
310 0
ElementUI之动态树+数据表格+分页->动态树,动态表格
ElementUI之动态树+数据表格+分页->动态树,动态表格
54 0
|
JavaScript 前端开发 测试技术
【Vue】动态树与数据表格分页查询实现
【Vue】动态树与数据表格分页查询实现
129 0
|
JavaScript 测试技术 API
vue09动态树+数据表格+分页模糊查
vue09动态树+数据表格+分页模糊查
vue09动态树+数据表格+分页模糊查
|
9月前
|
API
9.SPA项目开发之动态树+数据表格+分页
9.SPA项目开发之动态树+数据表格+分页
69 0
|
JavaScript 数据库
Vue之ElementUI之动态树+数据表格+分页(项目功能)
Vue之ElementUI之动态树+数据表格+分页(项目功能)
170 0
|
前端开发 API
基于Vue+ELement搭建动态树与数据表格实现分页
基于Vue+ELement搭建动态树与数据表格实现分页
50 0