Antd 树表格 defaultExpandAllRows 踩坑
问题背景
在使用 antdv 中树形表格时，设置了默认展开所有节点属性：:defaultExpandAllRows=“true”。
但是在重新获取新的数据后（即经历了tableData置空再赋值），却没有再默认展开节点。
原因解析
defaultExpandAllRows这个属性仅仅是用来设置默认值的，只在第一次渲染的时候起作用，当我们获取了数据之后再重新加载时，这时已经是第N次渲染了，所以它并没有默认展开。
解决方案
方案一：
数据没有加载之前不渲染。
// 增加 v-if
<a-table
v-if="tableData.length"
:defaultExpandAllRows="true"
:columns="columns"
:row-key="(record, index) => record.id"
:data-source="tableData"
>
方案二：
(记得tablekey是一个动态的 可以绑定一个获取详情刷新的值)
给Table设置一个key，获取数据之后改变这个key值，借助了key改变自动变成新的component可以解决这个问题。
// 增加 key
<a-table
:key="tableKey"
:defaultExpandAllRows="true"
:columns="columns"
:row-key="(record, index) => record.id"
:data-source="tableData"
>
以上两种方案可解决大多数情况（仅仅是重新渲染数据），而我遇到的却更复杂些（涉及排序等），所以上面两种不适用，可以适用下方方案三。
方案三
获取到数据后,把有children的父节点提取出来放在一个数组里,赋值给expandedRowKeys属性,这样就实现所有父节点展开的效果了。
但是设置了expandedRowKeys属性后，点击展开收起就会失效，还需要监听expand事件手动控制展开收起
设置了expandedKeys后，Tree组件就变为受控组件了。此刻所有展开收起都要手动控制。所以还需要监听expand事件手动控制展开收起
登录后复制
// 增加 expandedKeys 和监听 expand
<a-table
:expandedRowKeys="expandedRowKeys"
:defaultExpandAllRows="true"
:columns="columns"
:row-key="(record, index) => record.id"
:data-source="tableData"
@expand="onTableExpand"
>
let expandedRowKeys = ref<string[]>([]);
const getExpandedRowKeys = (list) => {
list.forEach((item) => {
if (item.children && item.children.length) {
// 将所有children的父节点取出
expandedRowKeys.value.push(item.id);
getExpandedRowKeys(item.children);
}
});
};
const onTableExpand = (expanded, record) => {
if (expanded) {
expandedRowKeys.value.push(record.id);
} else {
expandedRowKeys.value.splice(expandedRowKeys.value.indexOf(record.id), 1);
}
};
方案四
用一个展开的函数默认调用
获取详情调用
<a-table
:bordered="true"
:columns="columns"
:data-source="treeData"
:pagination="false"
:defau="true"
row-key="resourcesId"
:expanded-row-keys.sync="expandedRowKeys" //全部id展开方式
>
this.onExpandAll() //调用
//赋值
/** 展开全部 */
onExpandAll() {
const expandedKeys = []
_deepMapTree([…this.treeData], (d) => {
if (d.resourcesId) {
expandedKeys.push(d.resourcesId)
}
return d
})
this.expandedRowKeys = expandedKeys
},
?著作权归作者所有：
https://blog.51cto.com/marsxh/3823507（不确定是否原作）
