Ant Design Vue的table组件设置expandedRowKeys后会导致点击图标展开和折叠行失效

应用场景

使用Ant Design Vue框架开发前端，要求树状table表格默认全部展开。使用defaultExpandAllRows属性设置为true时不生效，使用expandedRowKeys实现了该目标，但是发现table表格的图标失效了。点击图标无法折叠或展开行。

解决办法

使用table组件的 @expand 事件，实现onExpand方法。在onExpand方法中进行控制，即可解决点击图标失效的问题

代码样例

<template>      
<a-table :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }" :columns="tableColumns" :data-source="treeData" :customRow="customRow" :row-key="(record) => record.uuid"
      :pagination="false"
        :scroll="{ x: 1600 }" :expandedRowKeys="defaultExpandedRowKeys" @expand="onExpand" style="min-height: 800px;">
 </a-table>
</template>

    const onExpand = (expanded: any, record: any) => {
      // console.log('extend:' + expanded)
      // console.log('record: ' + JSON.stringify(record))
      if (expanded) {
        // 设置展开窗Key，代表展开操作
        defaultExpandedRowKeys.value.push(record.uuid)
      } else {
        // 代表折叠操作
        if (defaultExpandedRowKeys.value.length) {
          defaultExpandedRowKeys.value = defaultExpandedRowKeys.value.filter(v => {
            return v !== record.uuid
          })
        }
      }
    }