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动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue自定义右键菜单之全局实现
Apr 09 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 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
晶体管来复再生式二管收音机
2021/03/02 无线电
打造计数器DIY三步曲(中)
2006/10/09 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
发现的以前不知道的函数
2006/09/19 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
BootStrap中
2016/12/10 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
Python xlwings插入Excel图片的实现方法
2021/02/26 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
应届生自荐信
2014/06/30 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
元旦主持词开场白
2015/05/29 职场文书
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server