解决element-ui中el-tree懒加载load只执行一次问题
在我们实际开发中,由于后端返回的节点数据量庞大,而用户往往没有要看到所有数据的需求,如果在页面加载中,将页面的所有节点数据都加载出来,无疑是浪费用户宝贵的时间,因此,就有了节点的懒加载的需求,用户想展开哪个节点,我们就给他展示什么数据(异步的从后台发送请求获取当前节点数据然后进行渲染)。
问题描述:
但是,根据官网提供的方法,懒加载只有执行一次,再点击不会重新加载了,这样后端数据有更新,也不会去调接口
解决方案:
采用最少的代码实现,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <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) { //异步接口调用 } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)