vue Element-ui 표 구현 트 리 구조 표

본 논문 의 사례 는 Element-ui 표 가 트 리 구조 표를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
전단 효과 표시:

el-table 에서 트 리 형식의 데 이 터 를 지원 합 니 다.row 에 포함 되면 children 필드 시 트 리 데이터 로 간 주 됩 니 다.트 리 데 이 터 를 렌 더 링 할 때 지정 해 야 합 니 다. row-key。하위 노드 데이터 비동기 로드 지원.
row 의 hasChildren 필드 에서 하위 노드 를 포함 하 는 줄 을 지정 합 니 다.children ...과 hasChildren 다 통과 할 수 있어 요. tree-props 배치
row-key="id"와:tree-props="{children:'children',hasChildren:'hasChildren'}은 필수 입 니 다.
다음은 vue 의 표 트 리 입 니 다.

 <!--  -->  
       <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, 10, 20, 30, 40]"
                        :page-size=pagination.pageSize
                        layout="total, prev, pager, next"
                        :total=pagination.total>
                    </el-pagination>
</el-row>

백 엔 드 코드:SpringBoot+MyPlus+MySQL 8 데이터 구조 조회 실현
전단 의 모든 코드:

<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"
              @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, 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'      //      
          }
        }).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.전단 표 에서 고 쳐 야 할 것 은:

2.백 엔 드 에서 주로 고 친 것 은:
(1)보기 층 에 보기 층 집합 속성 을 추가 하고 children 이 라 고 명명 해 야 전단 이 트 리 구조 로 렌 더 링 될 수 있 습 니 다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.