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.效果演示

目录
相关文章
|
6月前
|
SQL 前端开发 API
关于ElementUI之动态树+数据表格+分页实例
关于ElementUI之动态树+数据表格+分页实例
51 0
|
6月前
|
JavaScript 数据库
Vue之ElementUI之动态树+数据表格+分页(项目功能)
Vue之ElementUI之动态树+数据表格+分页(项目功能)
70 0
|
7月前
|
数据库
ElementUI动态树,数据表格以及分页的实现
ElementUI动态树,数据表格以及分页的实现
|
6月前
|
JavaScript
Layui数据表格嵌套文件上传按钮
Layui数据表格嵌套文件上传按钮
120 0
|
8月前
|
SQL 前端开发 搜索推荐
【Element-UI】实现动态树、数据表格及分页效果
在现代软件开发中,动态树、数据表格以及分页效果成为了许多应用的核心需求。随着业务规模和复杂性的增加,我们往往需要展示大量的层级结构数据,并且实现交互性强且高效的操作。 动态树提供了一种组织结构清晰、可伸缩的展示方式,使用户可以方便地查看和操作树节点。数据表格则是以表格形式呈现数据,在其中用户可以进行排序、筛选、编辑等操作。 而分页效果则能够将大量数据分割成易于管理和浏览的一页或一页的内容。这三种功能的结合,不仅使得我们能够更好地处理庞大的数据集合,同时也使得用户能够快速定位所需信息。 本文将介绍如何使用现代前端技术实现动态树、数据表格及分页
|
7月前
|
前端开发 API 网络架构
Vue+ElementUI实现动态树和表格数据的分页模糊查询
Vue+ElementUI实现动态树和表格数据的分页模糊查询
82 0
|
前端开发 JavaScript API
在 Vue3 + Element Plus 中生成动态表格,动态修改表格,多级表头,合并单元格
在 Vue 中,表格组件是使用频率及复杂度排名第一的组件,前端经常需要根据后台返回的数据动态渲染表格,比如动态表格如何生成,因为表格的列并不是固定的,在未知表格具体有哪些列的场景下,前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理,比如第一列是日期,需要把相同的日期进行合并,这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具,又不想处理前端问题,推荐使用卡拉云 ,卡拉云是新一代低代码开发工具,可一键接入常见数据库及 API ,无需懂前端,仅需拖拽即
2519 0
|
5月前
ElementUI之动态树+数据表格+分页->动态树,动态表格
ElementUI之动态树+数据表格+分页->动态树,动态表格
21 0
|
6月前
|
SQL 前端开发 JavaScript
ElementUI之动态树+数据表格+分页
ElementUI之动态树+数据表格+分页
34 0
|
6月前
|
JavaScript 前端开发 API
ElementUI--数据表格增删改查与表单验证
ElementUI--数据表格增删改查与表单验证
32 0