vue3项目中使用Arco Design-Table组件结合h()函数生成表格嵌套表格效果

最新推荐文章于 2025-05-13 19:40:35 发布

huangfuyk

最新推荐文章于 2025-05-13 19:40:35 发布

阅读量2.1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： arco design Vue 3 前端

本文链接：https://blog.csdn.net/weixin_42881768/article/details/135655915

vue3 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用ArcoDesign-Table组件结合h()函数实现表格的嵌套效果，包括设置expandable属性和自定义expandedRowRender方法。两种方式分别展示了如何配置展开行和使用expand-row插槽来展示子表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
})