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

使⽤el-table懒加载树形表格时的注意点先放个简单的el-table例⼦1、版本问题el-table懒加载执⾏两次，loading未取消的bug，后⾯升级版本即可。不升级的情况下可以如下⾯处理。mounted() { // 2.15.3

版本修复了这个bug，

⽬前版本没有更新 /ElemeFE/element/pull/21041 this.$ta = function(row, key, treeNode){ const { load } = ; const { treeData: rawTreeData } = ; if (load && !rawTreeData[key].loaded) { rawTreeData[key].loading = true; load(row, treeNode, data => { if (!y(data)) { throw new Error('[ElTable] data must be an array'); } const { lazyTreeNodeMap, treeData } = ; //

修复快速切换数据时报错

if(!treeData[key]) { return } treeData[key].loading = false; treeData[key].loaded = true; treeData[key].expanded = true; if () { this.$set(lazyTreeNodeMap, key, data); } .$emit('expand-change', row, true); }); } } },2、数据显⽰1、tableData是开始时的数据，后⾯load懒加载的数据都不会在tableData中2、设置tableData=[]，并没有清空树⾥⾯的数据，如果下次懒加载返回的是空数组，但页⾯上会显⽰上⼀次的数据。(如果你这个时候点击下载数据，就会出现下载的内容跟表格显⽰的不⼀致） resetLazyTree() {

//

单独设置这个是⽆效的，⼤坑~

⼀定要清空孩⼦，否则loadOrgTable返回数据在没有孩⼦的情况下会显⽰上次的孩⼦节点 ata = []

this.$set(this.$, 'lazyTreeNodeMap', {})},3、有时表格下⽅多出⼀⾏空⽩， 或者树形表格加载⼦节点时，可能出现滚动条，导致⾏错位。都可以尝试重新刷新表格布局//

对 Table

进⾏重新布局refreshTableLayout() { this.$nextTick(() => { this.$ut() })},3、滚动条不去改这个默认滚动条的样式，会少很多问题。。。。⽐如改变了滚动条的宽为现在的⼀半，那么会出现最后⼀⾏的第⼀列⽂字被挡住⼀半。这个先放着，有好的解决办法再来。。。4、数据结构像这种双表头的表格，数据结构可以如下：ata = [{ orgId: 1, orgName: '银⾏境内机构汇总', hasChildren: true, indData: [ { name："名字1", a: '--', b: '--', }， { name："2", a: '--', b: '--', }， ], children: [],}]如果名字栏的表头先渲染，那么接⼝indData⾥⾯的顺序⼀定要跟着名字的顺序，否则会出现数据错乱。5、el-table的fixed导致的问题场景： 使⽤excelJs 的DOM类型下载来下载表格中的数据， 在获取el-table下载数据后，发现sheet页中有两份相同的数据。原因：设置了fixed后，el-table渲染的结构中有两个table解决办法：通过$refs获取到虚拟dom，删除第⼆个表的dom即可， 这⾥不能获取真实的dom， 否则页⾯受到影响。