vue Element-ui表格实现树形结构表格


Posted in Vue.js onJune 07, 2021

本文实例为大家分享了Element-ui表格实现树形结构表格的具体代码,供大家参考,具体内容如下

前端效果展示:

vue Element-ui表格实现树形结构表格

在el-table中,支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。

通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

row-key="id"和:tree-props="{children: 'children', hasChildren: 'hasChildren'}是必须的。

下面是vue的表格树:

<!--表格-->  
       <el-row>
            <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="privilegeName" label="权限名称" >
                        </el-table-column>
                        <el-table-column prop="privilegeCode" label="权限编码" >
                        </el-table-column>
                        <el-table-column prop="privilegeType" label="权限类别" :formatter="formatPrivilegeType" >
                        </el-table-column>
 
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                
                                <el-button type="primary" size="mini" @click="toAdd(scope)">新增</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex"
                        :page-sizes="[5, 10, 20, 30, 40]"
                        :page-size=pagination.pageSize
                        layout="total, prev, pager, next"
                        :total=pagination.total>
                    </el-pagination>
</el-row>

后端代码:SpringBoot+MyPlus+MySQL8 实现数据结构查询

前端全部代码:

<style>
</style>
<template>
  <div id="privilege-manager">
   <!--顶部菜单栏-->
    <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-button
              class="el-icon-refresh"
              type="primary"
              @click="toAdd()">添加
            </el-button>
          </el-form-item>
      </el-form>
      <!--表格-->  
       <el-row>
            <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="privilegeName" label="权限名称" >
                        </el-table-column>
                        <el-table-column prop="privilegeCode" label="权限编码" >
                        </el-table-column>
                        <el-table-column prop="privilegeType" label="权限类别" :formatter="formatPrivilegeType" >
                        </el-table-column>
 
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                
                                <el-button type="primary" size="mini" @click="toAdd(scope)">新增</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex"
                        :page-sizes="[5, 10, 20, 30, 40]"
                        :page-size=pagination.pageSize
                        layout="total, prev, pager, next"
                        :total=pagination.total>
                    </el-pagination>
        </el-row>
 
 
  </div>
</template>
 
<script>
export default{
    name: 'privilege-manager',
    data () {
     return {
        tableData: [],
        dialogFormEdit: false,
        dialogFormAdd:false,
        privilege: {
          id: '',
          privilegeName: '',
          privilegeCode: '',
          privilegeType: '',
          pid: '0'
        },
        pagination: {
            pageIndex: 1,
            pageSize: 10,
            total: 0,
        }
      }
    },
    methods:{
         init () {
        var self = this
         this.$axios({
            method:'post',
            url:'/api/baoan/privilege/getPage',
            data:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize, "pid": this.privilege.pid},
            headers:{
                'Content-Type':'application/json;charset=utf-8'      //改这里就好了
          }
        }).then(res => {
           console.log(res);
           self.pagination.total = res.data.datas.data.total;
           self.tableData = res.data.datas.data.records;
        })
          .catch(function (error) {
            console.log(error)
          })
        },
        handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagination.pageSize = val;
                this.pagination.pageIndex = 1;
                this.init();
        },
        handleCurrentChange(val) {
                 console.log(`当前页: ${val}`);
                this.pagination.pageIndex = val;
                this.init();
        },
        // 权限类别转换
        formatPrivilegeType: function( row, column) {
                 if(row.privilegeType === '1'){
                     return '目录'
                 } else if(row.privilegeType === '2') {
                     return '菜单'
                 } else if (row.privilegeType === '3') {
                     return '按钮'
                 } else {
                     return ''
                 }
        }
    },
    mounted: function () {
      this.init()
  }
 
 
}
</script>

总结:

一、注意需要在前端表格里面改的是:

vue Element-ui表格实现树形结构表格

二、后端主要改的是:

(1)视图层里面加入视图层集合属性,注意一定要命名为children,这样前端才能渲染成树型结构。

vue Element-ui表格实现树形结构表格

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
vue响应式原理与双向数据的深入解析
vue实现水波涟漪效果的点击反馈指令
vue 实现上传组件
May 31 #Vue.js
vue基于Teleport实现Modal组件
Vue+Element UI实现概要小弹窗的全过程
vue-cli4.5.x快速搭建项目
You might like
解析php中call_user_func_array的作用
2013/06/07 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
javascript中 try catch用法
2015/08/16 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
python中的内置函数getattr()介绍及示例
2014/07/20 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python在不同层级目录import模块的方法
2016/01/31 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Scrapy框架实现的登录网站操作示例
2020/02/06 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
Python lxml库的简单介绍及基本使用讲解
2020/12/22 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
Fairyseason:为个人和批发商提供女装和配件
2017/03/01 全球购物
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
酒店销售主管岗位职责
2014/01/04 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
护士自我鉴定怎么写
2014/02/07 职场文书
创文明城市标语
2014/06/16 职场文书
律政俏佳人观后感
2015/06/09 职场文书
教师节晚会主持词
2015/06/30 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL