vue+element中table树形结构懒加载

1.开发环境 vue+element
2.电脑系统 windows10专业版
3.在开发的过程中,我们会遇到树形结构的表格,因为数据量非常的多,所以我们需要点击父元素把对应的id传给后端,那到子元素的数据,形成树形,下面我来分享一下如何实现。
4.废话不多说,直接上效果图:

5.第一次请求后端返回的数据结构:

// isParent :是否有子节点

6.需求:

// 点击父节点,把父节点的pid传给后端,后端返回子节点的数据

7.实现方法,使用element的table的懒加载解决,代码如下:

load(row, treeNode, resolve) {
    console.log(row);
    treetable({
        pid: row.id,
        storeId: this.account.storeId,
    }).then((res) => {
        console.log("我是树形结构的表格接口");
        console.log(res);
        resolve(res.result);  //使用懒加载的resolve方法
    });
},

8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。