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 25 Vue.js
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
vue使用echarts实现折线图
Mar 21 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue中data里面的数据相互使用方式
Jun 05 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 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
php构造函数实例讲解
2013/11/13 PHP
php共享内存段示例分享
2014/01/20 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
编写Python CGI脚本的教程
2015/06/29 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python面向对象思想与应用入门教程【类与对象】
2019/04/12 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
酒店服务实习自我鉴定
2013/09/22 职场文书
创意活动策划书
2014/01/15 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
监察建议书格式
2014/05/19 职场文书
企业员工集体活动方案
2014/08/17 职场文书
授权委托书(完整版)
2014/09/10 职场文书