关于Antd 树表格 defaultExpandAllRows 踩坑以及默认展开分析

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（不确定是否原作）