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 several solutions for JavaScript interruption requests
Table of contents 1 Promise Interrupt the call ch...
Docker container accesses the host's MySQL operation
background: There is a flask project that provide...
Detailed explanation of some commonly used font-size font units and line-height in CSS
px(pixel) I believe everyone is familiar with the...
Mysql method to copy a column of data in one table to a column in another table
mysql copy one table column to another table Some...
Difference between HTML ReadOnly and Enabled
The TextBox with the ReadOnly attribute will be di...
Summary of MYSQL full backup, master-slave replication, cascading replication, and semi-synchronization
mysql full backup 1. Enable binary log and separa...
Implementation of MySQL custom list sorting by specified field
Problem Description As we all know, the SQL to so...
A brief discussion on the built-in traversal methods of JS arrays and their differences
Table of contents forEach() (ES6) method map() (E...
How to import Tomcat source code into idea
Table of contents 1. Download the tomcat code 2. ...
Manually implement the two-way data binding principle of Vue2.0
In one sentence: Data hijacking (Object.definePro...
Docker learning method steps to build ActiveMQ message service
Preface ActiveMQ is the most popular and powerful...
Native JS to implement the aircraft war game
This article example shares the specific code of ...
Using js to implement simple switch light code
Body part: <button>Turn on/off light</bu...
JavaScript static scope and dynamic scope explained with examples
Table of contents Preface Static scope vs. dynami...
How to create a new user in CentOS and enable key login
Table of contents Create a new user Authorize new...