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使用Elementui修改默认的最快方法
Dec 05 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue cli4中mockjs在dev环境和build环境的配置详情
Apr 06 Vue.js
vue实力踩坑之push当前页无效
Apr 10 Vue.js
解决vue中provide inject的响应式监听
Apr 19 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
PHP bin2hex()函数基础实例讲解
2019/02/11 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
Promise扫盲贴
2019/06/24 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python中的rjust()方法使用详解
2015/05/19 Python
Python实现栈的方法
2015/05/26 Python
Python同时向控制台和文件输出日志logging的方法
2015/05/26 Python
python遍历目录的方法小结
2016/04/28 Python
Python 支付整合开发包的实现
2019/01/23 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python Tensor和Array对比分析
2020/01/08 Python
深入浅析pycharm中 Make available to all projects的含义
2020/09/15 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
简单叙述一下MYSQL的优化
2016/05/09 面试题
毕业自我鉴定怎么写
2014/03/25 职场文书
《春笋》教学反思
2014/04/15 职场文书
餐厅筹备计划书
2014/04/25 职场文书
大学生新学期计划书
2014/04/28 职场文书