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>

先要在第一个生命周期中请求最顶级的数据 并给和表格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 表示这条数据是无法展开的