elementui 表格数据-element ui 树形表单数据延迟加载

bendan520 elementui

2023-08-29 0 1,891 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

element ui中所谓table的延迟加载就是一次只显示一层数据

 <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 是此表单必须需要的键。唯一表示如果有id就必须使用id。

然后是数据属性，一般是第一层数据的来源

load方法是每次点击展开时启动的方法

首先请求第一个生命周期的top数据elementui 表格数据，并给出与表数据属性绑定的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
        }
    });
},