Points for attention when using El table to lazy load tree tables

Put a simple one first el-table Example

<el-table ref="refTable" :data="tableData" :load="loadOrgTable" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" row-key="orgId" lazy @expand-change="expandChange" >
</el-table>

1、 Version of the problem

el-table Lazy load is executed twice ,loading Not cancelled bug, You can upgrade the version later . Without upgrading, it can be handled as follows .

mounted() {
    
    // 2.15.3  Version fixes this bug,  The current version is not updated  https://github.com/ElemeFE/element/pull/21041
    this.$refs.refTable.store.loadData = function(row, key, treeNode){
    
      const {
     load } = this.table;
      const {
     treeData: rawTreeData } = this.states;
      if (load && !rawTreeData[key].loaded) {
    
        rawTreeData[key].loading = true;
        load(row, treeNode, data => {
    
          if (!Array.isArray(data)) {
    
            throw new Error('[ElTable] data must be an array');
          }
          const {
     lazyTreeNodeMap, treeData } = this.states;

          //  Fix the error of fast switching data  
          if(!treeData[key]) {
    
            return
          }
          treeData[key].loading = false;
          treeData[key].loaded = true;
          treeData[key].expanded = true;
          if (data.length) {
    
            this.$set(lazyTreeNodeMap, key, data);
          }
          this.table.$emit('expand-change', row, true);
        });
      }
    }
  },

2、 data display

1、tableData It's the data at the beginning , Back load Lazy loading data will not be tableData in
2、 Set up tableData=[], The data in the tree is not cleared , If the next lazy load returns an empty array , But the last data will be displayed on the page .( If you click to download data at this time , It will appear that the downloaded content is inconsistent with the table ）

 resetLazyTree() {
       
	//  Setting this alone is invalid , hole ~  Be sure to empty the children , otherwise loadOrgTable The returned data will show the last child node if there is no child 
	this.tableData = [] 
	this.$set(this.$refs.refTable.store.states, 'lazyTreeNodeMap', {
    })
},

3、 Sometimes there is an extra blank line at the bottom of the table , Or when the tree table loads child nodes , Scroll bars may appear , Cause row dislocation .
You can try to refresh the table layout again

//  Yes  Table  Re layout 
refreshTableLayout() {
    
   this.$nextTick(() => {
    
     this.$refs.refTable.doLayout()
   })
},

3、 Scroll bar

Don't change the default scroll bar style , There will be fewer problems ....

For example, the width of the scroll bar has been changed to half of the current , Then the first column of the last line will be blocked by half .

Put this first , Come back with a good solution ...

4、 data structure

A table with double headers like this , The data structure can be as follows ：

this.tableData = [{
    
	orgId: 1,
	orgName: ' Summary of domestic institutions of the bank ',
	hasChildren: true,
	indData: [
		{
    
			name：" name 1",
			a: '--',
			b: '--',
		},
		{
    
			name："2",
			a: '--',
			b: '--',
		},
	],
	children: [],
}]

If the header of the name bar is rendered first , So the interface indData The order inside must follow the order of names , Otherwise, there will be data confusion .

5、el-table Of fixed Resulting problems

scene ： Use excelJs Of DOM Type download to download the data in the table , In obtaining el-table After downloading the data , Find out sheet There are two copies of the same data in the page .
reason ： Set up fixed after ,el-table There are two in the rendered structure table
terms of settlement ： adopt $refs Get virtual dom, Delete the second table dom that will do , You can't get the real dom, Otherwise the page will be affected .