Vue 구성 요소 라 이브 러 리 Element UI 는 표 에 트 리 데이터 튜 토리 얼 을 불 러 옵 니 다.

ElementUI 는 표 트 리 목록 에 강 좌 를 불 러 옵 니 다.참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
Element UI 는 Vue 2.0 을 기본 프레임 워 크 로 구현 하 는 구성 요소 라 이브 러 리 로 개발 자,디자이너,제품 매니저 를 위 한 Vue 2.0 기반 구성 요소 라 이브 러 리 로 부대 디자인 자원 을 제공 하여 사이트 의 빠 른 성형 을 도 왔 다.
핵심 코드,el-table 에 속성 을 추가 합 니 다.:tree-props="{children:children'}"row 는 children 이 라 고 명명 해 야 합 니 다.홈 페이지 에서 도 설명 하 였 습 니 다.
트 리 형식의 데이터 디 스 플레이 를 지원 합 니 다.row 에 children 필드 가 포함 되 어 있 을 때 트 리 데이터 로 간 주 됩 니 다.트 리 데 이 터 를 렌 더 링 할 때 row-key 를 지정 해 야 합 니 다.하위 노드 데이터 비동기 로드 지원.Table 의 lazy 속성 을 true 와 로 딩 함수 load 로 설정 합 니 다.row 의 hasChildren 필드 를 지정 하여 하위 노드 를 포함 하 는 줄 을 지정 합 니 다.children 과 hasChildren 은 tree-props 를 통 해 설정 할 수 있 습 니 다.

<el-table
  ref="Table"
  :data="apprItemData"
  :header-cell-style="headClass"
        @select="handleSelection"
        row-key="approveItem"
        height="420"
  border
       default-expand-all
       :tree-props="{children: 'children'}">
 <el-table-column
   type="selection"
   width="55">
 </el-table-column>
 <el-table-column
   prop="itemCode"
   label="    ">
 </el-table-column>
 <el-table-column
   prop="approveName"
   label="    ">
 </el-table-column>
 <el-table-column
   prop="apprStatusStr"
   label="     "
   color="blue">
 </el-table-column>
</el-table>

배경 json 데이터:

{
    "id":3,
    "itemCode":"123",
    "approveName":"    ",
    "apprStatusStr":"    ",
    "children":[
        {
            "id":31,
            "itemCode":"111",
            "approveName":"    ",
            "apprStatusStr":"    "
        }
    ]
}

<script type="text/babel">
       var vm = new Vue({
           el: '#app',
           data:{
               apprItemData : [],
               currentPage: 1,  //   
               totalRow: 0, //   
               pageSize: 10 //      
           },
           computed: {},
           watch: {},
           created() {},
           mounted() {
               this.loadItemData();
  },
           methods: {
               //       
   loadItemData () {
                   var pageSize = this.pageSize;
                   var currentPage = this.currentPage;
                   console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
       //debugger;
       var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
                   $.ajax({
                       type: 'get',
                       url:geturl,
                       contentType: "application/json; charset=utf-8",
                       success: function(data) {
                           //debugger;
                           console.log("totalRow:"+data.total);
                           vm.apprItemData = data.rows;
                       },
                       error: function(e) {
                           console.log("        ：",e);
                       }
                   })
               }
           }
       });
</script>

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