vue antd table嵌套表格 左侧展开图标动态控制显示隐藏

antd a-table想要实现如以下效果,有子级就显示展开图标,没有就不显示图标:

话不多说,直接上代码:

<template>
  <a-table :columns="columns" :data-source="dataSource">
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>Publish</a>
      </template>
    </template>

    <template #expandIcon="{ expanded, onExpand, record }">
      <button @click="(e) => onExpand(record, e)" v-if="record && record.more.length"
        :class="`ant-table-row-expand-icon ${expanded ? 'ant-table-row-expand-icon-expanded' : 'ant-table-row-expand-icon-collapsed'}`"></button>
    </template>

    <template #expandedRowRender="{ record }">
      <a-table :columns="innerColumns" :data-source="record.more" :pagination="false">
        <template #bodyCell="{ column }">

          <template v-if="column.key === 'state'">
            <span>
              <a-badge status="success" />
              Finished
            </span>
          </template>

        </template>
      </a-table>
    </template>
  </a-table>
</template>
<script setup>

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



const dataSource = [{
  key: 0,
  name: "Screem 1",
  version: "10.3.4.5654",
  upgradeNum: 500,
  createdAt: "2014-12-24 23:12:00",
  more: [
    {
      key: 6,
      date: "2014-12-24 23:12:00",
      name: "This is production name 1",
      upgradeNum: "Upgraded: 56"
    }, {
      key: 7,
      date: "2014-12-24 23:12:00",
      name: "This is production name 2",
      upgradeNum: "Upgraded: 56"
    }, {
      key: 8,
      date: "2014-12-24 23:12:00",
      name: "This is production name 3",
      upgradeNum: "Upgraded: 56"
    }
  ]
}, {
  key: 1,
  name: "Screem 2",
  version: "10.3.4.5654",
  upgradeNum: 700,
  createdAt: "2014-12-24 23:12:00",
  more: []
}, {
  key: 2,
  name: "Screem 3",
  version: "10.3.4.5654",
  upgradeNum: 300,
  createdAt: "2014-12-24 23:12:00",
  more: [
    {
      key: 9,
      date: "2014-12-24 23:12:00",
      name: "This is production name 1",
      upgradeNum: "Upgraded: 56"
    }
  ]
}];


const innerColumns = [
  { title: 'Date', dataIndex: 'date', key: 'date' },
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
];


</script>

关键在于#expandIcon设置自定义图标,效果跟默认的效果一毛一样。

要注意:

我使用的是antd4,所以图标的类名是

ant-table-row-expand-icon-expanded、ant-table-row-expand-icon-collapsed。

大家如果用的版本不一样,可以控制台看下它默认渲染的图标类名是什么,直接复制过来替换掉就可以了,完美!

    <template #expandIcon="{ expanded, onExpand, record }">
      <button @click="(e) => onExpand(record, e)" v-if="record && record.more.length"
        :class="`ant-table-row-expand-icon ${expanded ? 'ant-table-row-expand-icon-expanded' : 'ant-table-row-expand-icon-collapsed'}`"></button>
    </template>

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

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

相关文章

最新若依项目快速上手

最新若依项目快速上手 配套视频&#xff1a;若依项目快速上手视频 1. 下载源码 官网&#xff1a;https://ruoyi.vip/ 前端 git clone https://github.com/yangzongzhuan/RuoYi-Vue3.git后端 git clone https://gitee.com/y_project/RuoYi-Vue.git2. 数据库 创建数据库ry-vue…

JAVA后端调用OpenAI接口 实现打字机效果(SSE)

SSE SSE&#xff08;Server-Sent Events&#xff0c;服务器发送事件&#xff09;是一种基于HTTP协议的通信技术&#xff0c;它允许服务器持续地将数据推送给客户端&#xff0c;而无需客户端发起请求。这种通信方式通常用于实时性要求较高的场景&#xff0c;如实时更新、通知、或…

Linux:搭建ntp服务器

我准备两个centos7服务器 一个为主服务器连接着外网&#xff0c;并且搭建了ntp服务给其他主机同步 另外一个没有连接外网&#xff0c;通过第一台设备去同步时间 首先两个服务器都要安装ntp软件 yum -y install ntp 再把他俩的时间都改成别的 左侧的是主服务器&#xff0c;主…

【Docker篇】自定义Dockerfile的操作

文章目录 &#x1f354;镜像结构&#x1f6f8;什么是Dockerfile⭐基于Ubuntu镜像构建一个新镜像&#xff0c;运行一个java项目&#x1f50e;使用 java:8-alpine &#x1f354;镜像结构 镜像是将应用程序及其需要的系统函数库、环境、配置、依赖打包而成。 我们以MySQL为例&am…

JVM中对象创建过程

在JVM中对象的创建&#xff0c;我们从一个new指令开始&#xff1a; 这个过程大概图示如下&#xff1a; 虚拟机收到new指令触发。 类加载检查&#xff1a;如果类没有被类加载器加载&#xff0c;则执行类加载流程&#xff08;将class信息加载到JVM的运行时数据区的过程&#xff…

KiCad 从原理图创建或者导出原理图符号

KiCad 从原理图创建或者导出原理图符号 原理图中&#xff0c;在下那个要导出的符号上点击右键-》属性-》编辑符号 在符号编辑中选择&#xff1a;文件-》导出符号 加微信&#xff1a;jiyuyun18, 交流电子技术 留言&#xff1a;CSND 电子技术交流群&#xff0c;加入电子微信电…

如何利用生成式AI进行品牌定位调研?

在激烈的市场竞争中&#xff0c;一个明确的品牌定位能够帮助企业突出其独特性&#xff0c;吸引并保留目标消费者。品牌定位调研是企业了解自身、竞争对手以及市场需求的重要手段&#xff0c;是制定有效市场策略的基础。本文将详细介绍如何进行品牌定位调研&#xff0c;包括调研…

PyTorch学习笔记之激活函数篇(四)

4、 Leaky ReLU 函数 4.1 公式 Leaky ReLU函数的公式&#xff1a; f ( x ) { x , x > 0 λ x , x < 0 , λ ∈ ( 0 , 1 ) f(x) \begin{cases} x&,x>0 \\ \lambda x&,x<0,\lambda \in(0,1) \end{cases} f(x){xλx​,x>0,x<0,λ∈(0,1)​ Leakly R…

MySQL连接数不足导致服务异常GetConnectionTimeoutException

文章目录 场景复现解决方案一、调整连接数二、优化程序 场景复现 已经上线正常运行的项目突然很多功能无法使用&#xff0c;查看程序日志发现MySQL报错&#xff0c;异常信息: Could not open JDBC Connection for transaction; nested exception is com.alibaba.druid.pool.Ge…

分布式(计算机算法)

目录 分布式计算 分布式​编辑 分布式和集群 分布式和集群的应用场景 分布式应用场景 集群应用场景 哪种技术更优、更快、更好呢 性能 稳定性 以下概念来源于百度百科 分布式计算 分布式计算是近年提出的一种新的计算方式。所谓分布式计算就是在两个或多个软件互相共享信息…

【ArcGISProSDK】添加异步执行时进度窗口

运行结果 代码 protected override async Task InitializeAsync(){using (ProgressorSource progressorSource new ProgressorSource("初始化...")){await QueuedTask.Run(delegate{MessageBox.Show(licenseExpirationDate.ToString());}, progressorSource.Progres…

介绍一下Spring的AOP

一、问题解析 典型回答 AOP(Aspect-Oriented Programming)&#xff0c;即面向切面编程&#xff0c;用人话说就是把公共的逻辑抽出来&#xff0c;让开发者可以更专注于业务逻辑开发。 和IOC一样&#xff0c;AOP也指的是一种思想。AOP思想是OOP&#xff08;Object-Oriented Prog…

【Java刷题篇】滑动窗口

文章目录 &#x1f4c3;滑动窗口&#x1f4dc;基本概念&#x1f4dc;核心思路 ✍最大连续1的个数 III✍水果成篮 &#x1f4c3;滑动窗口 &#x1f4dc;基本概念 滑动窗口是一种基于双指针的一种思想&#xff0c;两个指针指向的元素之间形成一个窗口。 分类&#xff1a;窗口有…

C++语言现在还有人学吗?

在当今信息爆炸的时代&#xff0c;计算机编程语言繁多&#xff0c;涌现了许多新兴的编程语言&#xff0c;如Python、JavaScript等。针对C编程语言是否还有人学的问题&#xff0c;我个人认为可以从以下几个方面进行讨论。 首先&#xff0c;C诞生于1979年&#xff0c;起初是为了开…

AI预测福彩3D第12弹【2024年3月18日预测--第3套算法重新开始计算第1次测试】

前面的第2套算法感觉效果比较差&#xff0c;与真实结果差距较大&#xff0c;因此&#xff0c;果断放弃第2套算法&#xff0c;再次进行了改进后&#xff0c;咱们从今天开始测试第3套算法。第3套算法加入了012路的权重。废话不多说了&#xff0c;直接上结果吧~ 最终&#xff0c;经…

数据驱动校园管理:山海鲸可视化软件看板搭建记

随着信息化时代的到来&#xff0c;校园管理也逐渐向数字化、可视化转型。作为一名数据分析师&#xff0c;我有幸参与了使用山海鲸可视化软件搭建校园管理可视化看板的项目&#xff0c;山海鲸可视化软件是近些年新崛起的一款可视化产品&#xff0c;支持免费可视化编辑、私有化部…

网络学习:IPV6地址详解

目录 前言&#xff1a; 一、IPV6的由来 二、什么是IPV6地址&#xff1f; IPV6地址结构&#xff1a; 前言&#xff1a; IPV6&#xff08;Internet Protocol Version 6&#xff09;是网络层协议的第二代标准协议&#xff0c;也被称为IPng&#xff08;IP Next Generation&…

SolidWorks教育版 科研版 商业版区别

SolidWorks是一款功能强大的三维CAD软件&#xff0c;广泛应用于机械设计、工业设计、建筑设计等领域。SolidWorks提供了多个版本&#xff0c;以满足不同用户的需求。本文将详细介绍SolidWorks教育版、科研版与商业版的区别&#xff0c;帮助你更好地选择适合自己的版本。 首先&…

sentinel熔断降级

熔断降级 Slot 责任链上的最后一环&#xff1a;熔断降级 DegradeSlot,熔断降级作为保护系统的一种强大手段,可以根据慢调用、异常比例和异常数进行熔断,并自定义持续时间以实现系统保护 规则配置 规则类中属性解析 与控制面板对应 // 其中资源名称在 AbstractRule 里。 pu…

计算机一级word 文字处理理论+实操试题

计算机一级word 文字处理理论实操试题 单选题&#xff1a; 1、在Word编辑状态下&#xff0c;要将另一文档的内容全部添加在当前文档的当前光标处&#xff0c;应选择的操作是依次单击______。 A.“文件”选项卡和“打开”项 B.“文件”选项卡和“新建”项 C.“插入”选项卡…