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';

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

// 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: 'address',},{title: '子邮箱',dataIndex: 'email',},],data: [ // data内容调取接口获取{key: '1',name: '张三',salary: 23000,address: '32 Park Road, London',email: '1@example.com',},{key: '2',name: '李四',salary: 25000,address: '35 Park Road, London',email: '2@example.com',},{key: '3',name: '王五',salary: 22000,address: '31 Park Road, London',email: '3@example.com',},{key: '4',name: '马六',salary: 17000,address: '42 Park Road, London',email: '4@example.com',},],});}return false;},});
</script>

【方式二】

1. 给Table组件设置表格的“展开行配置”参数：expandable
2. 结合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,
})