Vue Element-ui table realizes tree structure table
|
This article shares the specific code of Element-ui table to realize the tree structure table for your reference. The specific content is as follows Front-end effect display:
In el-table, the display of tree-type data is supported. When a row contains a children field, it is considered as tree data. When rendering tree data, you must specify the row-key. Support asynchronous loading of child node data. You can specify which rows contain child nodes by specifying the hasChildren field in row. Both children and hasChildren can be configured via tree-props. row-key="id" and :tree-props="{children: 'children', hasChildren: 'hasChildren'} are required. Below is the table tree of Vue:
<!--Table-->
<el-row>
<el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="privilegeName" label="Privilege Name" >
</el-table-column>
<el-table-column prop="privilegeCode" label="Permission Code" >
</el-table-column>
<el-table-column prop="privilegeType" label="Privilege Category" :formatter="formatPrivilegeType" >
</el-table-column>
<el-table-column label="operation">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="toAdd(scope)">Add</el-button>
<el-button type="primary" size="mini" @click="toEdit(scope)">Edit</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>Backend code: SpringBoot+MyPlus+MySQL8 to implement data structure query All front-end codes:
<style>
</style>
<template>
<div id="privilege-manager">
<!--Top menu bar-->
<el-form :inline="true" class="demo-form-inline">
<el-form-item>
<el-button
class="el-icon-refresh"
type="primary"
@click="toAdd()">Add</el-button>
</el-form-item>
</el-form>
<!--Table-->
<el-row>
<el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="privilegeName" label="Privilege Name" >
</el-table-column>
<el-table-column prop="privilegeCode" label="Permission Code" >
</el-table-column>
<el-table-column prop="privilegeType" label="Privilege Category" :formatter="formatPrivilegeType" >
</el-table-column>
<el-table-column label="operation">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="toAdd(scope)">Add</el-button>
<el-button type="primary" size="mini" @click="toEdit(scope)">Edit</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' //Just change it here}
}).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} items per page`);
this.pagination.pageSize = val;
this.pagination.pageIndex = 1;
this.init();
},
handleCurrentChange(val) {
console.log(`Current page: ${val}`);
this.pagination.pageIndex = val;
this.init();
},
//Privilege type conversion formatPrivilegeType: function( row, column) {
if(row.privilegeType === '1'){
return 'Directory'
} else if(row.privilegeType === '2') {
return 'menu'
} else if (row.privilegeType === '3') {
return 'button'
} else {
return ''
}
}
},
mounted: function () {
this.init()
}
}
</script>Summarize:1. Note that what needs to be changed in the front-end table is:
2. The main changes to the backend are: (1) Add a view layer collection attribute to the view layer. Note that it must be named children so that the front end can render it into a tree structure.
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Analysis of the difference between placing on and where in MySQL query conditions
>>: Windows uses VMware to create a Linux virtual machine and install the CentOS7.2 operating system
Recommend
Detailed explanation of Nest.js environment variable configuration and serialization
A brief description of environment variable confi...
Detailed explanation of the implementation principle of Vue2.0/3.0 two-way data binding
The implementation principle of Vue2.0/3.0 two-wa...
In-depth explanation of the various methods and advantages and disadvantages of JavaScript inheritance
Table of contents 1. Prototype chain inheritance ...
How to use Javascript to generate smooth curves
Table of contents Preface Introduction to Bezier ...
How to implement mask layer in HTML How to use mask layer in HTML
Using mask layers in web pages can prevent repeat...
WeChat applet silent login and maintenance of custom login state detailed explanation
Table of contents 1. Background 2. What is silent...
Detailed explanation of jQuery method attributes
Table of contents 1. Introduction to jQuery 2. jQ...
Modify the jvm encoding problem when Tomcat is running
question: Recently, garbled data appeared when de...
Docker meets Intellij IDEA, Java development improves productivity tenfold
Table of contents 1. Preparation before developme...
Setting the engine MyISAM/InnoDB when creating a data table in MySQL
When I configured mysql, I set the default storag...
Use Meta to cancel the traffic cache to refresh the page every time you visit it for easy debugging
Copy code The code is as follows: <!-- Prevent...
JavaScript implements page scrolling animation
Table of contents Create a layout Add CSS styles ...
Solution to forgetting the root password of self-built MySQL in Alibaba Cloud Linux CentOS 7.2
Verification environment: [root@~~/]# rpm -qa | g...
Detailed explanation of Nginx process scheduling problem
Nginx uses a fixed number of multi-process models...
Detailed explanation of mysql exists and not exists examples
Detailed explanation of mysql exists and not exis...