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

需求:在父表格中嵌套子表格,当点击展开某一行时,有展开的关闭当前展开行。使用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>


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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

26计算机操作系统408考研-操作系统进程与线程篇章(三)

操作系统进程与线程篇章 ` 文章目录 操作系统进程与线程篇章前言一、进程概念进程控制块进程创建进程终止进程的阻塞和唤醒进程唤醒进程挂起和激活线程多线程线程实现与线程模型总结互斥和同步并发原理硬件同步信号量机制信号量的应用管程经典同步问题消息传递前言 一、进程概…

清华新突破||新研究揭示多智能体协作的秘密武器

获取本文论文原文PDF&#xff0c;请在公众号【AI论文解读】留言&#xff1a;论文解读点击订阅&#xff1a;人工智能论文解读合集 引言&#xff1a;多智能体协作中的挑战与机遇 在多智能体系统中&#xff0c;智能体需要通过协作来完成复杂的任务&#xff0c;这种协作涉及到通信…

Python高级进阶--slice切片

slice切片⭐⭐ 在 Python 中&#xff0c;切片操作是一种常见且方便的方式&#xff0c;用于从字符串、列表或元组中获取部分元素。这种操作通过指定起始索引、结束索引和步长来实现。下面我们来看一些关于切片的简单介绍以及一些常见用法。 1. 切片简介 取一个str、list、tup…

kafka跨地区跨集群同步工具MirrorMaker2 —— 筑梦之路

MM2简介 KIP-382: MirrorMaker 2.0 - Apache Kafka - Apache Software Foundation 有四种运行MM2的方法&#xff1a; As a dedicated MirrorMaker cluster.&#xff08;作为专用的MirrorMaker群集&#xff09; As a Connector in a distributed Connect cluster.&#xff08…

单片机设计注意事项

1.电源线可以30mil走线&#xff0c;信号线可以6mil走线 2.LDO推荐 SGM2019-3.3,RT9013,RT9193,1117-3.3V。 3.单片机VCC要充分滤波后再供电&#xff0c;可以接0.1uf的电容 4.晶振附件不要走其他元件&#xff0c;且放置完单片机后就放置晶振&#xff0c;晶振靠近X1,X2。

Mysql基础(七)DQL之select 语句(二)

一 select 语句续 WHERE子句后面跟着的是一个或多个条件,用于指定需要检索的行COUNT(): 多少条数据 where 11 和 count(1) 与 count(*) count(1)、count(*)和count(指定字段)之间的区别 ① order by 排序 mysql 之数据排序扩展 1、使用 order by 语句来实现排序2、排序可…

如何利用GitHubAction来发布自己的Python软件包

我们开发的python软件包如果想发布到网上&#xff0c;可以让其他人通过pip install下载&#xff0c;一般是把软件包发布到PYPI平台。 PYPI准备 我们要现在pypi注册登录一下 文件组织架构 一般的python软件包的文件组织架构为包名文件夹__init__.py程序&#xff0c;包文件夹的…

VBA即用型代码手册:删除Excel中空白行Delete Blank Rows in Excel

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。可以大大提高自己的劳动效率&#xff0c;而且可以提高数据的准确性。我这里专注VBA,将我多年的经验汇集在VBA系列九套教程中。 作为我的学员要利用我的积木编程思想&#xff0c;积木编程最重要的是积木如何搭建…

Spring Cloud学习笔记(Nacos):配置中心基础和代码样例

这是本人学习的总结&#xff0c;主要学习资料如下 - 马士兵教育 1、Overview2、样例2.1、Dependency2.2、配置文件的定位2.3、bootstrap.yml2.4、配置中心新增配置2.5、验证 1、Overview 配置中心用于管理配置项和配置文件&#xff0c;比如平时写的application.yml就是配置文件…

计算机网络套接字知识(非常详细)从零基础入门到精通

本节重点 认识IP地址, 端口号, 网络字节序等网络编程中的基本概念; 学习socket api的基本用法; 一、预备知识 1.理解源IP地址和目的IP地址 ⭐在IP数据包头部中&#xff0c;有两个IP地址&#xff0c;分别叫做源IP地址和目的IP地址。 思考: 我们光有IP地址就可以完成通信了…

Linux Tcpdump抓包入门

Linux Tcpdump抓包入门 一、Tcpdump简介 tcpdump 是一个在Linux系统上用于网络分析和抓包的强大工具。它能够捕获网络数据包并提供详细的分析信息&#xff0c;有助于网络管理员和开发人员诊断网络问题和监控网络流量。 安装部署 # 在Debian/Ubuntu上安装 sudo apt-get install…

基于Perfetto 解读一帧的生产消费流程 Android >= S Qualcomm

广告 首先帮我朋友打个广告 我们一起在运营一个视频号 感兴趣的可以帮忙点击右边这个小铃铛 铃铛 序 1.这个流程里面的东西如果展开其实是有很多的 内容其实还是比较浅显的 sf处就不贴源码了 关一个Vsync就有的解释 当然笔者在流程上先形成一个思维闭环 2.如有小伙伴需要 笔…

C++完成特色旅游管理信息系统

背景&#xff1a; 继C完成淄博烧烤节管理系统后&#xff0c;我们来到了特色旅游管理信息系统的代码编写&#xff0c;历史链接点下方。 C完成淄博烧烤节管理系统_淄博烧烤总账管理系统的-CSDN博客 问题描述&#xff1a; 为了更好的管理各个服务小组&#xff0c;开发相应的管…

C# 拓展方法(涉及Linq)

拓展方法 定义一个扩展方法使用扩展方法例如再举个例子终极例子 注意事项与Linq 在C#中&#xff0c;扩展方法是一种特殊的静态方法&#xff0c;允许开发者向现有类型“添加”新的方法&#xff0c;而无需修改该类型的源代码或创建新的派生类型。这种机制提供了一种更为灵活的方式…

结构化开发方法(数据流图)

一、系统设计基本原理 二、系统总体结构设计 三、数据流图 数据流图

出口加工园区gis三维可视化系统全面整合了企业线上线下资源与服务

园区作为产业协同和经济推动的关键节点&#xff0c;承载着企业生产、物流和服务等多种功能&#xff0c;数字孪生三维可视化技术的出现&#xff0c;通过数字孪生和3D可视化的方式&#xff0c;对园区情况和运营实现实时监测和管理&#xff0c;提高了运营效率和协同性。 园区数字孪…

STM32 学习——1. STM32最小系统

这是一个最小系统的测试&#xff0c;LED灯会进行闪烁。选用PC13口&#xff0c;因为STM32F103C8T6 硬件开发板中&#xff0c;这个端口是一个LED 1. proteus8.15 原理图 2. cubemx 新建工程 3. keil 代码 while (1){HAL_GPIO_TogglePin(LED_GPIO_Port, LED_Pin);HAL_Delay(100);…

Css 提高 - 获取DOM元素

目录 1、根据选择器来获取DOM元素 2.、根据选择器来获取DOM元素伪数组 3、根据id获取一个元素 4、通过标签类型名获取所有该标签的元素 5、通过类名获取元素 目标&#xff1a;能查找/获取DOM对象 1、根据选择器来获取DOM元素 语法&#xff1a; document.querySelector(css选择…

一套MES系统源码,技术架构springboot + vue-element-plus-admin

一、系统概述 MES全称Manufacturing Execution System&#xff0c;即制造执行系统&#xff0c;它是一套面向生产车间的管理系统。MES系统可用于实现制造业自动化和数字化转型&#xff0c;它可以帮助车间管理人员监控、跟踪、记录和控制从原材料到成品的产品制造流程&#xff0…

掌握Python基本语法的终极指南【基本语法部分】

一、基本语法部分 1.简单数据类型 1.1字符串类型及操作 字符串访问&#xff1a; 1.索引访问 mystr"Hello world" #索引访问 print(mystr[0]) #H print(mystr[-1]) #d print(mystr[-7]) #o print(mystr[6]) #w 2.切片访问 [头下标&#xff1a;尾下标] &#x…