在vue3中使用arco design table组件展开行功能遇到的问题

本文已参与「新人创作礼」活动， 一起开启掘金创作之路。

之前讲过一个关键展开行的内容问题，可参考博客：Arco Design 表格展开行的内容 —— Arco Design在vue3中的应用

今天来讲讲在使用arco design table组件的展开行功能时遇到的另一个问题：设置了默认展开所有可以展开的行，这样写普通情况是没有问题，但是我们有个需求是可以手动给表格增加行，如果新增加的行是展开的，那么上面设置的default-expand-all-rows属性（对应 TableExpandable 的 defaultExpandAllRows这个属性）对就新增的行失效了。

关于展开行的设置都在官网的 TableExpandable 这一部分里，api是这么写的：

所以我最初的代码是这样的：

<a-table :columns="columns" :data="data" :expandable="expandable" />

// js
const expandable = reactive({
    title: 'Expand',
    width: 80,
    expandedRowKeys: [...],  // 所有行的key
    defaultExpandAllRows： true， // 是否默认展开所有的行
    expandedRowRender: (record) => {
        if(record.key==='3'){
          return `My Name is ${record.name}`
        }
    }
});

为了解决这个问题我尝试了api中的 expandedRowKeys（显示的展开行） 这个属性，然后在每次增加一行的时候都会把新增行的key push进 expandedRowKeys 这个数组。默认展开所有行的设置+手动添加进 expandedRowKeys（显示的展开行），理论上是没问题的吧？

然而，这么写并没有什么用，新增的行还是不会默认打开。。。

其实想说服产品放弃这个小细节，然而测试和产品还是希望新增的行也能默认展开。于是我不得不在不忙的时候，再找这个问题的解决办法。（如果能信手拈来看源码，或许会好很多）

后来想着试试 a-table的 expanded-keys 这个属性，和 TableExpandable里的expandedRowKeys（显示的展开行）一起使用，然后在执行添加行的操作的时候，把新增行的key push进 和expanded-keys绑定的数组。

<a-table :columns="columns" :data="data" :expandable="expandable" :expanded-keys="expandable.expandedRowKeys" />

// js
const expandable = reactive({
    title: 'Expand',
    width: 80,
    expandedRowKeys: [...],  // 所有行的key
    defaultExpandAllRows： true， // 是否默认展开所有的行
    expandedRowRender: (record) => {
        if(record.key==='3'){
          return `My Name is ${record.name}`
        }
    }
});

其实问题在于我之前以为 a-table的expanded-keys 属性 和 TableExpandable 的expandedRowKeys是一样的，于是就只在设置TableExpandable的时候设置了默认展开行，结果发现是不行的，因为它不能控制新增加的行。

a-table的expanded-keys 属性才能控制新增的行。

希望本文对你有所帮助。