Ant Design Vue中 a-table 嵌套子表格

news2024/11/27 18:50:43

需求:在父表格中嵌套子表格,当点击展开某一行时,有展开的关闭当前展开行。使用a-table中的expandedRowKeys 属性和expand 方法。链接:Ant Design Vue

一、属性说明:

   expandedRowKeys:这个主要是控制展开某行,它是一个数组形式,

   expand:这个可以接受两个参数,一个是是否展开,另一个是当前行的数据Function(expanded, record)。

二、示例代码:

   // 添加相应的属性和方法,这边自定义数据  我以官网为例  :expandedRowKeys="expandedRowKeys"   目的是使expandedRowKeys只有最新点开子表单的key
	<template>
  <a-table :columns="columns" :data-source="data" :expandedRowKeys="expandedRowKeys" @expand="expand" class="components-table-demo-nested">
    <template #operation>
      <a>Publish</a>
    </template>
    <template #expandedRowRender>
      <a-table :columns="innerColumns" :data-source="innerData" :pagination="false">
        <template #status>
          <span>
            <a-badge status="success" />
            Finished
          </span>
        </template>
        <template #operation>
          <span class="table-operation">
            <a>Pause</a>
            <a>Stop</a>
            <a-dropdown>
              <template #overlay>
                <a-menu>
                  <a-menu-item>Action 1</a-menu-item>
                  <a-menu-item>Action 2</a-menu-item>
                </a-menu>
              </template>
              <a>
                More
                <down-outlined />
              </a>
            </a-dropdown>
          </span>
        </template>
      </a-table>
    </template>
  </a-table>
</template>
<script lang="ts">
import { DownOutlined } from '@ant-design/icons-vue';
import { defineComponent } from 'vue';

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Platform', dataIndex: 'platform', key: 'platform' },
  { title: 'Version', dataIndex: 'version', key: 'version' },
  { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  { title: 'Creator', dataIndex: 'creator', key: 'creator' },
  { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },
  { title: 'Action', key: 'operation', slots: { customRender: 'operation' } },
];

interface DataItem {
  key: number;
  name: string;
  platform: string;
  version: string;
  upgradeNum: number;
  creator: string;
  createdAt: string;
}

const data: DataItem[] = [];
for (let i = 0; i < 3; ++i) {
  data.push({
    key: i,
    name: 'Screem',
    platform: 'iOS',
    version: '10.3.4.5654',
    upgradeNum: 500,
    creator: 'Jack',
    createdAt: '2014-12-24 23:12:00',
  });
}

const innerColumns = [
  { title: 'Date', dataIndex: 'date', key: 'date' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Status', key: 'state', slots: { customRender: 'status' } },
  { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  {
    title: 'Action',
    dataIndex: 'operation',
    key: 'operation',
    slots: { customRender: 'operation' },
  },
];

interface innerDataItem {
  key: number;
  date: string;
  name: string;
  upgradeNum: string;
}

const innerData: innerDataItem[] = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    key: i,
    date: '2014-12-24 23:12:00',
    name: 'This is production name',
    upgradeNum: 'Upgraded: 56',
  });
}
const expandedRowKeys = ref([])
const expand = (expanded,record) => {
    expandedRowKeys.value = []
	// 只展开一行
	if (expanded) {
		//进这个判断说明当前已经有展开的了
		//返回某个指定的字符串值在字符串中首次出现的位置,下标为0
		let index = expandedRowKeys.value.indexOf(record.id)
		if (index > -1) {
			//如果出现则截取这个id,1d到1相当于0,针对重复点击一个
			expandedRowKeys.value.splice(index, 1)
		} else {
			//如果没出现则截取所有id,添加点击id,0到1,针对已经有一个展开,点另一个会进入判断
			expandedRowKeys.value.splice(0, expandedRowKeys.value.length)
			expandedRowKeys.value.push(record.id)
		}
	} else {
		//数组长度小于0,说明都没展开,第一次点击,id添加到数组,数组有谁的id谁就展开
		expandedRowKeys.value.push(record.id)
	}
    
}
export default defineComponent({
  components: {
    DownOutlined,
  },
  setup() {
    return {
      data,
      columns,
      innerColumns,
      innerData,
      expandedRowKeys,
        
    };
  },
});
</script>


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

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

相关文章

ubuntu strace命令

strace 是 Linux 系统中的一个调试工具&#xff0c;用于跟踪并记录系统调用&#xff08;system calls&#xff09;和信号&#xff08;signals&#xff09;。在 Ubuntu 中&#xff0c;strace 命令可以帮助开发者和系统管理员了解一个程序在运行时如何与操作系统内核进行交互&…

【全开源】智能名片系统源码(Fastadmin+ThinkPHP和Uniapp)

数字时代的新名片&#xff0c;连接未来的桥梁 引言 在数字化浪潮的推动下&#xff0c;传统名片已经逐渐淡出人们的视线。取而代之的是智能名片系统&#xff0c;它以其高效、便捷和智能化的特点&#xff0c;成为了商务交流的新宠。而智能名片系统源码&#xff0c;作为其核心驱…

267 基于matlab的信号处理GUI人机交互

基于matlab的信号处理GUI人机交互&#xff0c;利用GUI功能完成包括振幅调制AM&#xff08;Amplitude Modulation&#xff09;&#xff0c;双边带调幅信号DSB&#xff08;double sideband&#xff09;&#xff0c;单边带信号SSB&#xff08;single sideband &#xff09;&#x…

Linux线程:管理与控制

一、引言 随着计算机硬件技术的飞速发展&#xff0c;尤其是多核CPU的普及&#xff0c;多线程编程已成为充分利用系统资源、提高程序并发性和响应速度的关键技术。 多线程编程允许一个程序中同时运行多个线程&#xff0c;每个线程可以独立地执行不同的任务。这种并行处理的方式…

白酒:产地的水资源与酿酒工艺的关联性

云仓酒庄豪迈白酒的酿造过程中&#xff0c;水资源与酿酒工艺之间存在着密切的关联性。水是白酒酿造的重要原料之一&#xff0c;其质量和数量直接影响着酿酒工艺的实施和酒的品质。下面我们和云仓酒庄豪迈白酒来深入探讨一下&#xff0c;产地的水资源如何与酿酒工艺产生关联。 首…

【C++课程学习】:二叉树的基本函数实现

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;C课程学习 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 &#x1f349;二叉树的结构类型&#xff1a; &#x1f349;1.创建二叉树函数&#xff08;根据数组&am…

lammps案例:reaxff势模拟Fe(OH)3高温反应过程

大家好&#xff0c;我是小马老师。 本文分享一个reaxff反应势的案例。 该案例主要模拟Fe(OH)3在高温下的反应过程&#xff0c;主要代码来自lammps自带的案例。 lammps自带案例没有产物输出&#xff0c;故在此基础上稍加修改&#xff0c;增加了产物输出命令。 反应过程如下图…

2024年国内最全面最前沿人工智能理论和实践资料

引言 【导读】2024第11届全球互联网架构大会圆满结束。会议邀请了100余位行业内的领军人物和革新者&#xff0c;大会通过主题演讲、实践案例分享&#xff0c;以及前瞻性的技术讨论&#xff0c;探索AI技术的边界。 近日&#xff0c;备受瞩目的第十一届全球互联网架构大会&#x…

Design and implementation of robot impedance controller

机器人阻抗控制器的设计与实现是一个复杂但关键的过程&#xff0c;它涉及到多个方面以确保机器人能够在外界环境的影响下保持稳定的性能。以下是对机器人阻抗控制器设计与实现的详细解答&#xff1a; 一、阻抗控制原理 阻抗控制的基本原理是建立一个期望的机器人位置和接触力…

守护景区安全:探讨景区视频监控方案的搭建及必要性

据新闻报道&#xff0c;5月25日&#xff0c;安徽黄山景区内发生雷击&#xff0c;闪电击中飞来石景点的护栏&#xff0c;多人被碎石砸中受伤。景区工作人员表示&#xff0c;飞来石附近本就属于雷区&#xff0c;当天曾发过两次雷电预警。 随着旅游业的繁荣发展&#xff0c;越来越…

ChatGPT自然科学应用,R语言lavaan结构方程模型、copula函数

R语言lavaan结构方程模型&#xff08;SEM&#xff09; 结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;是分析系统内变量间的相互关系的利器&#xff0c;可通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和…

本地部署 MiniCPM-Llama3-V 2.5

本地部署 MiniCPM-Llama3-V 2.5 0. 引言1. 性能评估2. 典型示例3. 本地部署4. 运行 WebUI Demo5. vLLM 部署 0. 引言 MiniCPM-Llama3-V 2.5 是 MiniCPM-V 系列的最新版本模型&#xff0c;基于 SigLip-400M 和 Llama3-8B-Instruct 构建&#xff0c;共 8B 参数量&#xff0c;相较…

封装,static,代码块,对象的打印

封装&#xff0c;static&#xff0c;代码块&#xff0c;对象的打印 1. 封装1.1 封装的概念1.2 包的概念1.3 访问修饰限定符1.4 被封装的属性如何set和get&#xff1f; 2. static2.1 再谈学生类2.2 static修饰成员变量2.3 static修饰成员方法2.4 static成员变量初始化 3. 代码块…

JVM、JRE 和 JDK 的区别,及如何解决学习中可能会遇到的问题

在学习Java编程的过程中&#xff0c;理解JVM、JRE和JDK之间的区别是非常重要的。它们是Java开发和运行环境的核心组件&#xff0c;各自扮演不同的角色。 一、JVM&#xff08;Java Virtual Machine&#xff09; 定义 JVM&#xff08;Java虚拟机&#xff09;是一个虚拟化的计算…

基于 vuestic-ui 实战教程 - 登录篇

1. 简介 登录做为一个系统的门面&#xff0c;也是阻挡外界的一道防线&#xff0c;那在vuestic-ui中如何做登录功能呢。在这里就之间沿用初始版本的Login页面&#xff0c;作为一个演示模板&#xff0c;后续需要改进的读者可以在此篇文章的基础上修改。 2. 登录接口相关api 与 t…

2024-5-28 石群电路-16

2024-5-28&#xff0c;星期二&#xff0c;20:14&#xff0c;天气&#xff1a;晴&#xff0c;心情&#xff1a;晴。今天没有什么特别的事情发生&#xff0c;不过返校假期已经开始啦&#xff0c;和女朋友逛了街&#xff0c;吃了好吃的&#xff0c;学习也当然不能落下啦&#xff0…

LeetCode/NowCoder-栈和队列OJ练习

孜孜不倦&#xff1a;孜孜&#xff1a;勤勉&#xff0c;不懈怠。指工作或学习勤奋不知疲倦。&#x1f493;&#x1f493;&#x1f493; 目录 说在前面 题目一&#xff1a;括号匹配问题 题目二&#xff1a;用队列实现栈 题目三&#xff1a;用栈实现队列 题目四&#xff1a;设…

Javascript--词法作用域

词法作用域 词法阶段 大部分标准化语言编辑器的第一个工作阶段叫做词法化&#xff0c;词法化会对源代码中的字符进行检查&#xff0c;如果是有状态的解析过程&#xff0c;还会赋予单词语义。 简单来说&#xff0c;词法作用域就是在词法阶段的作用域&#xff0c; function fo…

《架演》共创者第一次线上沟通会议总结

《架演》共创者第一次线上沟通——启动会 会议主题&#xff1a;《架演》共创启动会议会议时间&#xff1a;2024年5月28日&#xff0c;20:00 - 21:00会议地点&#xff1a;腾讯会议主持人&#xff1a;寒山参会人员&#xff1a; 夏军、mirror、刘哥、悟缺席人员&#xff1a;可心、…

为表格添加背景色:\rowcolor, \columncolor,\cellcolor

设置行的背景 \rowcolor 是 LaTeX 中用于设置表格行的背景色的命令。它可以使表格更加美观和易于阅读。rowcolor 命令通常与 colortbl 宏包一起使用。 语法如下&#xff1a; \rowcolor{<color>}其中 表示要设置的背景色&#xff0c;可以是预定义的颜色名称&#xff08…