本文例項為大家分享了Element-ui表格實現樹形結構表格的具體程式碼，供大家參考，具體內容如下

前端效果展示:

在el-table中，支援樹型別的資料的顯示。當 row 中包含children欄位時，被視為樹形資料。渲染樹形資料時，必須要指定row-key。支援子節點資料非同步載入。

通過指定 row 中的hasChildren欄位來指定哪些行是包含子節點。children與hasChildren都可以通過tree-props配置。

row-key="id"和:tree-props="{children: 'children',hasChildren: 'hasChildren'}是必須的。

下面是vue的表格樹：

 <!--表格-->  
 http://www.cppcns.com      <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">
                                
     sTpuryK
 
                           <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-paginatiowww.cppcns.com
 
n
                        @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"
                       sTpuryK :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"
  sTpuryK            @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,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，這樣前端才能渲染成樹型結構。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。