vue3项目中使用Arco Design-Table组件【点击跳转】结合vue3-h()函数【点击跳转】生成表格嵌套表格效果。
示例效果如下:
【方式一】
- 给Table组件设置表格的“展开行配置”参数:
expandable
<a-table :expandable="expandable"></a-table>
- 结合“自定义展开行内容”参数:
expandedRowRender
- 引入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: '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>
【方式二】
- 给Table组件设置表格的“展开行配置”参数:
expandable
- 结合
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,
})