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

vue3项目中使用Arco Design-Table组件【点击跳转】结合vue3-h()函数【点击跳转】生成表格嵌套表格效果。

示例效果如下:

在这里插入图片描述
【方式一】

  1. 给Table组件设置表格的“展开行配置”参数:expandable
<a-table :expandable="expandable"></a-table>
  1. 结合“自定义展开行内容”参数:expandedRowRender
  2. 引入h()函数、引入Table组件
import {h } from 'vue';
import { Table } from '@arco-design/web-vue';
  1. 整体示例代码如下(具体信息已用注释形式标出):
// 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,
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/650258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZYNQ程序固化

文章目录 一、简介二、固化操作2.1 生成固化文件2.2 固化到SD卡2.3 固化到Flash 参考 将程序存储在非易失性存储器中&#xff0c;在上电或者复位时让程序自动加载运行。 这个过程需要启动引导程序( Boot Loader)参与&#xff0c;Boot Loader会加载FPGA配置文件&#xff0c;以及…

【异常收集】IDEA启动项目遇到的异常汇总,包括插件异常,版本依赖异常,启动异常等以及对应的解决办法

该文章旨在记录开发中遇到的一些异常&#xff0c;以供遇到似错误进行参考修改 一、项目在多个环境下切换&#xff0c;有一次启动后编译失败&#xff0c;报异常 背景&#xff1a;项目在不同环境下有对应的分支&#xff0c;切换分支后运行项目&#xff0c;报错如下 错误:Kotlin:…

【mac】 配合鼠标放大缩小页面\通过ctrl或cmd键缩放页面

win转mac后&#xff0c;一直苦于页面的操作习惯&#xff0c;终于BBT这个工具可以通过添加滚轮手势来实现快捷键缩放页面 顶部配置触发选择“普通鼠标” 然后设置触发操作

滴滴基于 Ray 的 XGBoost 大规模分布式训练实践

背景介绍 作为机器学习模型的核心代表&#xff0c;XGBoost 在滴滴众多策略算法业务场景中发挥着至关重要的作用。因此&#xff0c;保障并持续提升 XGBoost 模型的离线训练及在线推理稳定性一直是机器学习平台的重点工作。同时&#xff0c;面对多样化的业务场景定制需求和数据规…

ubuntu设置右键打开terminator、code

前言&#xff1a; 这里介绍一种直接右键打开本地目录下的terminator和vscode的方法。 一&#xff1a;右键打开terminator 1.安装terminator sudo apt install terminator 2.安装nautilus-actions filemanager-actions sudo apt-get install nautilus-actions filemanager…

docker-compose Install influxdb1+influxdb2+telegraf

influxd2前言 influxd2 是 InfluxDB 2.x 版本的后台进程,是一个开源的时序数据库平台,用于存储、查询和可视化时间序列数据。它提供了一个强大的查询语言和 API,可以快速而轻松地处理大量的高性能时序数据。 telegraf 是一个开源的代理程序,它可以收集、处理和传输各种不…

Typora 无法导出 pdf 问题的解决

目录 问题描述 解决困难 解决方法 问题描述 Windows 下&#xff0c;以前&#xff08;Windows 11&#xff09; Typora 可以顺利较快地由 .md 导出 .pdf 文件&#xff0c;此功能当然非常实用与重要。 然而&#xff0c;有一次电脑因故重装了系统&#xff08;刷机&#xff09;…

如何获得ICP备案服务码?

服务码获取规则 域名备案需要ICP备案服务码&#xff0c;服务码需要购买服务器获得&#xff0c;阿里云的服务器获取服务码的规则如下。 * 不同类型的服务器可申请的ICP备案服务码数量不同&#xff0c;新增备案一个网站需使用一个ICP备案服务码&#xff0c;注销或取消接入后无法…

QT+VS实现Kmeans聚类算法

1、Kmeans的定义 聚类是一个将数据集中在某些方面相似的数据成员进行分类组织的过程&#xff0c;聚类就是一种发现这种内在结构的技术&#xff0c;聚类技术经常被称为无监督学习。k均值聚类是最著名的划分聚类算法&#xff0c;由于简洁和效率使得他成为所有聚类算法中最广泛使…

linux中配置文件目录为什么用etc来命名

在早期的 Unix 系统中&#xff0c;/etc 目录的名称确实来源于单词 “etcetera” 的缩写&#xff0c;最初意味着 “其他”&#xff0c;用来存放杂项或者不属于其他特定目录的文件。然而&#xff0c;随着时间的推移&#xff0c;/etc 目录的用途逐渐演变并专门化。 在现代的 Linux…

Android App开发-简单控件(1)——文本显示

本章介绍了App开发常见的几类简单控件的用法&#xff0c;主要包括&#xff1a;显示文字的文本视图、容纳视图的常用布局、响应点击的按钮控件、显示图片的图像视图等。然后结合本章所涉及的知识&#xff0c;完成一个实战项目“简单计算器”的设计与实现。 1.1 文本显示 本节介绍…

架构篇27:如何设计计算高可用架构?

文章目录 主备主从集群小结计算高可用的主要设计目标是:当出现部分硬件损坏时,计算任务能够继续正常运行。因此计算高可用的本质是通过冗余来规避部分故障的风险,单台服务器是无论如何都达不到这个目标的。所以计算高可用的设计思想很简单:通过增加更多服务器来达到计算高可…

【Docker】nacos集群搭建Nginx负载均衡

目录 一、mysql安装与基操 1.1 数据准备 1.2 创建mysql与数据表 二、Nacos集群部署 2.1 创建nacos及配置 2.2 创建Nginx容器 一、mysql安装与基操 1.1 数据准备 拉取mysql docker pull mysql:5.7(版本) 定义挂载目录 mkdir -p /mysql/{conf,data,script} 配置my.c…

JavaWeb:商品管理系统(Vue版)

文章目录 1、功能介绍2、技术栈3、环境准备3.1、数据库准备3.2、在新建web项目中导入依赖3.3、编写Mybatis文件3.4、编写pojo类3.5、编写Mybatis工具类3.6、导入前端素材&#xff08;element-ui & vue.js & axios.js&#xff09;3.7、前端页面 4、功能实现4.1、查询所有…

深度学习:Softmax回归

在前面&#xff0c;我们介绍了线性回归模型的原理及实现。线性回归适合于预测连续值&#xff0c;而对于分类问题的离散值则束手无策。因此引出了本文所要介绍的softmax回归模型&#xff0c;该模型是针对多分类问题所提出的。下面我们将从softmax回归模型的原理开始介绍&#xf…

浪花 - 响应拦截器(强制登录)

1. 配置响应拦截器 import axios from axios;const myAxios axios.create({baseURL: http://localhost:8080/api/, });myAxios.defaults.withCredentials true;// 请求拦截器 myAxios.interceptors.request.use(function (config) {// Do something before request is sentc…

把批量M3U8网络视频地址转为MP4视频

在数字媒体时代&#xff0c;视频格式的转换已成为一项常见的需求。尤其对于那些经常处理网络视频的用户来说&#xff0c;将M3U8格式的视频转换为更常见的MP4格式是一项必备技能。幸运的是&#xff0c;现在有了固乔剪辑助手这款强大的工具&#xff0c;这一过程变得异常简单。下面…

Android SharedPreferences源码分析

文章目录 Android SharedPreferences源码分析概述基本使用源码分析获取SP对象初始化和读取数据写入数据MemoryCommitResultcommitToMemory()commit()apply()enqueueDiskWrite()writeToFile() 主动等待写回任务结束 总结 Android SharedPreferences源码分析 概述 SharedPrefer…

2024初学编曲免费软件FL Studio21.2.2

FL Studio在业内也被称作“水果”软件&#xff0c;这是一款功能强大、简单易上手的专业编曲软件。软件中的音效插件库拥有超过25种音效插件&#xff0c;能够帮助激发我们的创作灵感。而FL Studio中文还推出了训练营课程&#xff0c;初学者可以在训练营中进行编曲知识的学习&…

Android消息推送 SSE(Server-Sent Events)方案实践

转载请注明出处&#xff1a;https://blog.csdn.net/kong_gu_you_lan/article/details/135777170 本文出自 容华谢后的博客 0.写在前面 最近公司项目用到了消息推送功能&#xff0c;在技术选型的时候想要找一个轻量级的方案&#xff0c;偶然看到一篇文章讲ChatGPT的对话机制是基…