需求

vue3项目中使用Arco Design - Table结合 vue3-h()函数实现表格嵌套表格的效果

实现方式

方式一

1、给Table组件设置表格的“展开行配置”参数：expandable

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

2、结合“自定义展开行内容”参数：expandedRowRender
3、引入h()函数、引入Table组件

import {h } from 'vue';
import { Table } from '@arco-design/web-vue';

整体示例代码如下（具体信息已用注释形式标出）：

// template
<a-table :expandable="expandable"></a-table> // 父表格// script
<script lang="ts" setup>
import {h } from 'vue';// 引入h()组件
import { Table } from '@arco-design/web-vue'; // 引入Table组件const expandable = reactive({title: '', // 上图左上角格子的展示值width: 60, // 根据需要设置宽度，为了使左侧第一列空白（只展示+ -）expandedRowRender: (record: any) => { // record:当前行数据if (record.id === 1) { // 根据自己需要，选择让某行具有展开效果return h(Table, { // Table组件已在上方引入pagination: false, // 隐藏分页columns: [ // columns数组值调取接口获取{title: '',dataIndex: '',width: 60, // 设置空白列，为了使左侧第一列只展示+ -},{title: '子名称',dataIndex: 'name',},{title: '子金额',dataIndex: 'salary',},{title: '子邮箱',dataIndex: 'email',},],data: [ // data内容调取接口获取{key: '1',name: 'Jane Doe',salary: 23000,address: '32 Park Road, London',email: 'jane.doe@example.com',}, {key: '2',name: 'Alisa Ross',salary: 25000,address: '35 Park Road, London',email: 'alisa.ross@example.com'}, {key: '3',name: 'Kevin Sandra',salary: 22000,address: '31 Park Road, London',email: 'kevin.sandra@example.com'}, ],});}return false;},});
</script>

方式二

1、给Table组件设置表格的“展开行配置”参数：expandable
2、结合expand-row插槽
在插槽中，可以放置自定义的子表格或其他内容。当点击展开按钮时，会显示expand - row插槽中的内容，再次点击则收起。

示例代码如下：

// template
<a-table :expandable="expandable"><template #expand-row='{ record }'>// 下面展示子表格,根据需求对子table进行属性配置<a-table></a-table></template>
</a-table>
// script
const expandable = reactive({title: '', // 上图左上角格子的展示值width: 60,
})

操作父元素时默认收起当前展开行

实现思路
状态管理：运用一个响应式变量来记录当前展开行的 key。
监听操作事件：在父元素操作的事件处理函数里，把展开行的状态重置。
控制展开状态：利用 expandedRowKeys 属性和 onExpand 事件来控制展开行的显示与隐藏。

示例代码：

<template><div><!-- 模拟父元素操作按钮 --><a-button @click="handleParentAction">操作父元素</a-button><a-table:columns="columns":data-source="dataSource":expandable="{expandedRowKeys: expandedRowKeys,onExpand: handleExpand}"><template #expand-row="{ record }"><p>这是展开行的内容，记录 ID: {{ record.id }}</p></template></a-table></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import { Table, Button } from '@arco-design/web-vue';// 表格列配置
const columns = [{title: 'ID',dataIndex: 'id',width: 100},{title: '姓名',dataIndex: 'name',width: 150}
];// 表格数据源
const dataSource = [{key: '1',id: 1,name: '张三'},{key: '2',id: 2,name: '李四'},{key: '3',id: 3,name: '王五'}
];// 记录当前展开行的 key
const expandedRowKeys = ref<string[]>([]);// 处理展开行事件
const handleExpand = (expanded: boolean, record: any) => {if (expanded) {expandedRowKeys.value = [record.key];} else {expandedRowKeys.value = [];}
};// 处理父元素操作事件
const handleParentAction = () => {// 重置展开行状态expandedRowKeys.value = [];
};
</script>

代码解释：
状态管理：借助 ref 创建 expandedRowKeys 来记录当前展开行的 key。
表格配置：在 Table 组件里，使用 expandable 属性进行配置，把 expandedRowKeys 传递给 expandable，并通过 onExpand 事件处理展开行的操作。
处理展开行事件：在 handleExpand 函数中，依据 expanded 状态更新 expandedRowKeys。
处理父元素操作事件：在 handleParentAction 函数中，将 expandedRowKeys 重置为空数组，以此实现收起当前展开行的效果。