vue Element-ui表格实现树形结构表格
更新时间：2022年09月01日 10:40:04 作者：在奋斗的大道
这篇文章主要为大家详细介绍了vue Element-ui表格实现树形结构表格，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>总结：
一、注意需要在前端表格里面改的是：
二、后端主要改的是：
（1）视图层里面加入视图层集合属性，注意一定要命名为children，这样前端才能渲染成树型结构。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
对于Vue为何采用异步渲染，简单来说就是为了提升性能，因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图，本文主要通过几个实例给大家介绍一下Vue为何采用异步渲染,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue-gird-layout组件封装示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
react+vite动态导入报错@vite-ignore的问题及解决
这篇文章主要介绍了react+vite动态导入报错@vite-ignore的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue 中引用gojs绘制E-R图的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中的echarts实现宽度自适应,本文给大家分享实现方案，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
这篇文章主要为大家介绍了Vue配置环境变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要介绍了vue components 动态组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11
这篇文章主要介绍了vue3-pinia-ts项目中的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了解决VUEX刷新的时候出现数据消失,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了Vue 动态路由的实现，动态路由是一个常用的功能，根据后台返回的路由json表，前端动态显示可跳转的路由项，本文主要实现的是后台传递路由，前端拿到并生成侧边栏的一个形势，需要的朋友可以参考一下2022-06-06
最新评论