Vue組件庫ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程

更新時(shí)間：2021年06月06日 12:30:40 作者：smileNicky

這篇文章主要為大家詳細(xì)介紹了Vue組件庫ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

ElementUI實(shí)現(xiàn)表格樹形列表加載教程，供大家參考，具體內(nèi)容如下

Element UI 是一套采用 Vue 2.0 作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的組件庫，提供了配套設(shè)計(jì)資源，幫助網(wǎng)站快速成型

關(guān)鍵代碼，在el-table添加屬性， :tree-props="{children: 'children'}" ，注意row必須命名為children，官網(wǎng)也進(jìn)行了說明：

支持樹類型的數(shù)據(jù)的顯示。當(dāng) row 中包含 children 字段時(shí)，被視為樹形數(shù)據(jù)。渲染樹形數(shù)據(jù)時(shí)，必須要指定 row-key。支持子節(jié)點(diǎn)數(shù)據(jù)異步加載。設(shè)置 Table 的 lazy 屬性為 true 與加載函數(shù) load 。通過指定 row 中的 hasChildren 字段來指定哪些行是包含子節(jié)點(diǎn)。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="事項(xiàng)編碼">
 </el-table-column>
 <el-table-column
   prop="approveName"
   label="事項(xiàng)名稱">
 </el-table-column>
 <el-table-column
   prop="apprStatusStr"
   label="配置的環(huán)節(jié)"
   color="blue">
 </el-table-column>
</el-table>

后臺json數(shù)據(jù)：

{
    "id":3,
    "itemCode":"123",
    "approveName":"測試事項(xiàng)",
    "apprStatusStr":"環(huán)節(jié)名稱",
    "children":[
        {
            "id":31,
            "itemCode":"111",
            "approveName":"測試事項(xiàng)",
            "apprStatusStr":"環(huán)節(jié)名稱"
        }
    ]
}

<script type="text/babel">
       var vm = new Vue({
           el: '#app',
           data:{
               apprItemData : [],
               currentPage: 1,  //當(dāng)前頁
               totalRow: 0, //總頁數(shù)
               pageSize: 10 //當(dāng)前顯示條數(shù)
           },
           computed: {},
           watch: {},
           created() {},
           mounted() {
               this.loadItemData();
  },
           methods: {
               // 加載事項(xiàng)信息
   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("更新數(shù)據(jù)出現(xiàn)錯(cuò)誤：",e);
                       }
                   })
               }
           }
       });
</script>