[<t-table>] expanded展开行能不能控制一键全关闭以及同时只能展开一个？

[156786462]

tdesign-vue 版本

^1.3.0

重现链接

No response

重现步骤

No response

期望结果

No response

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Tasks

Beta Give feedback

No tasks being tracked yet.

[github-actions]

👋 @156786462，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[chaishi]

一键打开和关闭（重点在 onExpandChange 中的逻辑）

<template>
  <div>
    <t-table :data="tableData" :expandedRowKeys="expandedRowKeys" :onExpandChange="onExpandChange" />
    <t-button @click="onToggleExpanded">打开全部/关闭全部</t-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ id: '123', name: 'user name' }],
      expandedRowKeys: [],
    }
  },

  methods: {
    onToggleExpanded() {
      this.expandedRowKeys = this.expandedRowKeys.length ? [] : this.tableData.map(item => item.id);
    },
  }
}
</script>

控制同时只能打开一个（重点在 onExpandChange 中的逻辑）

<template>
  <t-table :data="tableData" :expandedRowKeys="expandedRowKeys" :onExpandChange="onExpandChange" />
</template>

<script>
export default {
  data() {
    return {
      tableData: [{ id: '123', name: 'user name' }],
      expandedRowKeys: [],
    }
  },

  methods: {
    // 保持 this.expandedRowKeys 始终只有一个值，就可以保证同时只能打开一个。同理可推，可以保持可以同时打开任意个数。
    onExpandChange(val, { expandedRowData }) {
      this.expandedRowKeys = val.length ?  [expandedRowData.id] : [];
      // 或者
      // this.expandedRowKeys = this.expandedRowKeys.length ? [] : val;
    },
  }
}
</script>