解决element-ui中el-tree懒加载load只执行一次问题
在我们实际开发中,由于后端返回的节点数据量庞大,而用户往往没有要看到所有数据的需求,如果在页面加载中,将页面的所有节点数据都加载出来,无疑是浪费用户宝贵的时间,因此,就有了节点的懒加载的需求,用户想展开哪个节点,我们就给他展示什么数据(异步的从后台发送请求获取当前节点数据然后进行渲染)。
问题描述:
但是,根据官网提供的方法,懒加载只有执行一次,再点击不会重新加载了,这样后端数据有更新,也不会去调接口
解决方案:
采用最少的代码实现,
<el-table
ref="table"
:data="data"
style="width: 100%"
:height="tableHeight"
row-key="menuId"
lazy
:load="getChildMenus"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
v-loading="loading"
@expand-change="handleExpandChange"
>
</el-table>
//点击获取菜单绑定的接口
handleExpandChange(row, expanded) {
if (!expanded) {
let tableRef = this.$refs.table;
tableRef.store.states.treeData[row.menuId].loaded = false; //设置为false
tableRef.store.states.treeData[row.menuId].expanded = false;
}
},
//获取菜单绑定得接口
getChildMenus(tree, treeNode, resolve) {
//异步接口调用
}

浙公网安备 33010602011771号