Vue组件库ElementUI实现表格加载树形数据教程

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。