Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to achieve tree structure table in Element-ui table in vue". In daily operation, I believe that many people have doubts about how to achieve tree structure table in Element-ui table in vue. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "how to realize tree structure table in Element-ui table in vue". Next, please follow the editor to study!

Front-end effect display:

In el-table, the display of tree-type data is supported. When a row contains a children field, it is treated as tree data. Row-key must be specified when rendering tree data. Support for asynchronous loading of child node data.

Specify which rows contain child nodes by specifying the hasChildren field in the row. Both children and hasChildren can be configured through tree-props.

Row-key= "id" and: tree-props= "{children: 'children', hasChildren:' hasChildren'} are required.

Here is the table tree for vue:

New editor

Back-end code: SpringBoot+MyPlus+MySQL8 implements data structure query

All the code at the front end:

Add New editor

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 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} 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 () }, / / permission category 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 ()}} so far The study on "how to realize the tree structure table of Element-ui table in vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.