2023年6月22日发(作者：)

解决vue+element-ui项⽬中表格树形结构⼦节点数据重新加载问题【项⽬中实践】问题描述element-ui中表格树形数据结构，使⽤了懒加载模式时，在对数据进⾏增删改查时视图并不能实时更新，需要刷新浏览器进⾏强制刷新数据才会显⽰。解决⽅案百度+源码阅读在element-ui中的table⽂件中的⽂件中找到关于⼦节点懒加载的⽅法。loadData(row, key, treeNode) { const { load } = ; const { lazyTreeNodeMap, treeData } = ; if (load && !treeData[key].loaded) { treeData[key].loading = true; load(row, treeNode, data => { if (!y(data)) { throw new Error('[ElTable] data must be an array'); } treeData[key].loading = false; treeData[key].loaded = true; treeData[key].expanded = true; if () { this.$set(lazyTreeNodeMap, key, data); } .$emit('expand-change', row, true); }); } }从以上代码我们不难看出表格树形数据在每次更新节点时都调⽤了该⽅法。其中load就是组件暴露出来给我们绑定懒加载的⽅法。该⽅法中实现节点更新的关键代码在于this.$set(lazyTreeNodeMap, key, data);this.$set(lazyTreeNodeMap, key, data);lazyTreeNodeMap: this.$eeNodeMap // table为组件中ref绑定属性key: //

就是table-key，data: //

节点的children数组项⽬实践代码html代码 ...data代码maps: new Map()表格组件中load绑定的loadTree⽅法loadTree(tree, treeNode, resolve) { //

将当前选中节点数据存储到map中 (, { tree, treeNode, resolve }) try { //

根据实际项⽬发送ajax获取数据 getGoodsCategorys({ parentId: }).then(res => { const nodes = (item => { return { ...item, //

该数据有三级结构 hasChildren: <= 2 } }) resolve(nodes) }) } catch (error) { return error } }触发loadTree⽅法//

重新触发树形表格的loadTree函数(因项⽬中需要多次触发loadTree⽅法，故封装成⼀个⽅法)refreshLoadTree(parentId) { //

根据⽗级id取出对应节点数据 const { tree, treeNode, resolve } = (parentId) this.$set(this.$eeNodeMap, parentId, []) if (tree) { ee(tree, treeNode, resolve) }}⽆论是对节点进⾏增加、修改、删除都是通过触发refreshLoadTree⽅法中的this.$set(this.$eeNodeMap,parentId, [])+ee(tree, treeNode, resolve)进⾏更新节点数据的。结束语：希望该⽂章能够帮助你在项⽬中该解决问题。如有更好的解决⽅法或是对该解决⽅案有疑问，欢迎留⾔⼀起讨论！