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+iview分页组件的封装
Nov 17 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
如何理解Vue前后端数据交互与显示
May 10 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
Vue监视数据的原理详解
Feb 24 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
Vue-router 报错NavigationDuplicated的解决方法
2020/03/31 Javascript
python使用socket向客户端发送数据的方法
2015/04/29 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
Linux机考试题
2015/07/17 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
机关门卫制度
2014/02/01 职场文书
企业安全生产责任书
2014/04/14 职场文书
竞选部长演讲稿
2014/04/26 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
博士生专家推荐信
2014/09/26 职场文书
起诉书格式范文
2015/05/20 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers