el-table树型数据lazy加载实现首行展开
遇到一个小需求,一个树型数据的el-table,并且使用lazy加载,需要实现首行展开。
实现
思路:使用 expand-row-keys
或者 toggleRowExpansion
API展开,但是发现这些API并不会触发 load
函数。
解:开始自动获取第一行数据的子数据,并设置进第一行数据的 children
里,再使用 toggleRowExpansion
API展开第一行。
新问题:点击折叠会再次触发 load
函数
解:展开过一次的行,后面再折叠与展开不会再触发 load
,说明触发 load
是有触发机制的,借助了一下混元,找到了这个控制变量 tableRef.value.store.states.treeData.value[].loaded
,尝试改了它 loaded: true
:
tableRef.value.store.states.lazyTreeNodeMap.value[firstRow.yourRowKey] = children;
tableRef.value.store.states.treeData.value[firstRow.yourRowKey] = {children,display: true,expanded: true,lazy: true,level: 0,loaded: true,loading: false,};
然后,工作了,默认首行展开,折叠/展开切换正常。