element ui树形表格数据懒加载

element ui所谓的表格懒加载就是一次只展示一层的数据

 <el-table
    :data="tableData"
    style="width: 100%;margin-top: 10px;"
    row-key="id"
    border
    lazy
    :load="getChildrens"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column prop="name" label="名称" width = '300' ></el-table-column>
</el-table>

row-key是这个表格必须要的 key就是唯一标识 这个有id的话肯定是用id的
然后就是data属性 这个通常做第一层数据的来源
load方法就是每次点击展开时出发的方法

先要在第一个生命周期中请求最顶级的数据 并给和表格data属性绑定的tableData赋值
item.hasChildren属性为true 这条数据的前面就会出现那个表示可以展开的小箭头 为false 则不展示

created(){
    getSystemMenuList(0).then((src) => {
       if(src.status == 200) {
             this.tableData = src.data.map((item, index) =>{
                 item.hasChildren = true;
                 return item
             })
         }
     })
}

然后我们来编写load对应的getChildrens函数

getChildrens(tree,treeNode, resolve){
   getSystemMenuList(tree.id).then((response) => {
        var data
        if(response.data.length&&response.data.length > 0){
            let data = response.data.map((item, index) =>{
                item.hasChildren = true;
                return item
            })
            resolve(data)
        }else{
            tree.hasChildren = false
        }
    });
},

这个函数时在当某一条数据前面的展开小箭头被点击时触发的
接收三个参数
第一个是触发这个事件的那条数据
第二个我们不需要使用
第三个是返回给他的子数据
这里我们通过第一个参数就是触发事件的那条数据的id去调接口
然后判断接口返回的数据如果不是空的 则将他的子集循环 将他们的hasChildren 也赋为true 表示数据项是可以接着展开的
然后将调出来的子数据扔给resolve 这样他就会出现成为触发事件数据的子集

如果接口没有调出数据 为空 则这个数据是没有子集的 就拿到这个数据本身 第一个参数 将他的hasChildren赋为false 表示这条数据是无法展开的