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:

Vue implements tree table through element tree control
Detailed explanation of adding dotted lines to Vue element tree controls
Vue component library ElementUI implements table loading tree data tutorial
Vue+element UI realizes tree table
Vue+Element UI tree control integrates drop-down function menu (tree + dropdown +input)
Vue Element-ui implements tree control node adding icon detailed explanation

<<: 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