在我们实际开发中,由于后端返回的节点数据量庞大,而用户往往没有要看到所有数据的需求,如果在页面加载中,将页面的所有节点数据都加载出来,无疑是浪费用户宝贵的时间,因此,就有了节点的懒加载的需求,用户想展开哪个节点,我们就给他展示什么数据(异步的从后台发送请求获取当前节点数据然后进行渲染)。
问题描述:
但是,根据官网提供的方法,懒加载只有执行一次,再点击不会重新加载了,这样后端数据有更新,也不会去调接口
解决方案:
采用最少的代码实现,
<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) { //异步接口调用
}
标签:load,el,expanded,false,tableRef,tree,row,节点,加载 From: https://www.cnblogs.com/qinyuanchun/p/17901390.html