Vue組件庫ElementUI實現表格加載樹形數據教程

Posted on by

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>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：