ant design自定义展开折叠查看子项和点击行查看详情

实现思路:通过配置rowSelection,列表项是否可选择来实现。
在这里插入图片描述
页面内容:

 <a-table :dataSource="integrationBonds" :columns="columns" :customRow="customintegrationBondsRow":pagination="{hideOnSinglePage: true}":expandIconColumnIndex="-1":expandIconAsCell="false":hideDefaultSelections="true":rowKey="(record) => record.bondCode":expandedRowKeys="curExpandedRowKeys":row-selection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange,}"><template #bodyCell="{ column, record }"><template v-if="column.dataIndex === 'rate'"><DownCircleOutlined class="ml-8 fs-24" @click.stop="handleExpand(record?.bondCode)" /></template></template><!-- 展开内容 --><template #expandedRowRender><div class="detail"><h4>行情</h4><a-row><a-col>60009</a-col><a-col>招商证券</a-col><a-col>239,000,000</a-col><a-col>72</a-col><a-col class="c-primary">2.1%</a-col></a-row></div></template>
</a-table>

交互内容:

// 表格头
columns = [{title: '证券代码', dataIndex: 'bondCode', key: 'bondCode'},{title: '证券名称', dataIndex: 'bondName', key: 'bondName'},{title: '数量(股)', dataIndex: 'amount', key: 'amount', sorter: true},{title: '期限(天)', dataIndex: 'termDays', key: 'termDays', sorter: true},{title: '利率', dataIndex: 'rate', key: 'rate', sorter: true},
];
// 表格数据
integrationBonds = [{amount: '23000000',bondCode:'601099',bondName: "太平洋",myBond: false,rate: 2.1,termDays: 7}
];
// 列表项是否可选择数组
curExpandedRowKeys = []; //点击哪行展开数组(数组里只会存在一个值,具体逻辑在methods的点击事件里.)!!!
selectedRowKeys = [];//列表项是否可选择数组
// 点击行查查详情
customintegrationBondsRow(record) {return {// 行点击事件onClick: (event) => {console.log('行点击事件');},}
}
// 自定义图标展开行事件
handleExpand(bondCode) {this.checkedBondCode = bondCode;this.viewAll = !this.viewAll;// 判断点击的是那一行的数组(数组中只有一个项)if (this.curExpandedRowKeys.length > 0) {let index = this.curExpandedRowKeys.indexOf(bondCode);if (index > -1) {this.curExpandedRowKeys.splice(index, 1);} else {this.curExpandedRowKeys.splice(0, this.curExpandedRowKeys.length);this.curExpandedRowKeys.push(bondCode);}} else {this.curExpandedRowKeys.push(bondCode);}
}
// 选中项发生变化时的回调函数
onSelectChange(selectedRowKeys) {this.selectedRowKeys = selectedRowKeys;
}

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

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

相关文章

Docker创建Consul并添加权限控制

一、部署Consul 1、拉取镜像&#xff1a; docker pull consul:<consul-version> 2、运行 docker run --name consul1 -p 8300:8300/tcp -p 8301:8301/tcp -p 8301:8301/udp -p 8302:8302/tcp -p 8302:8302/udp -p 8500:8500 -p 8600:8600/tcp -p 8600:8600/udp -v /h…

用Cmake build OpenCV后,在VS中查看OpenCV源码的方法(环境VS2022+openCV4.8.0) Part I

用Cmake build OpenCV后&#xff0c;在VS中查看OpenCV源码的方法 Part I 本文打算分成两部分写&#xff1a; 第一部分力求用最简单的办法帮助大家直接在VS中查看OpenCV的源码。这种方法最大的优点就是不容易出错&#xff0c;且操作简单。如果只是需要查看OpenCV源码的同学&…

matlab使用教程(24)—常微分方程(ODE)求解器

1.常微分方程 常微分方程 (ODE) 包含与一个自变量 t&#xff08;通常称为时间&#xff09;相关的因变量 y 的一个或多个导数。此处用于表示 y 关于 t 的导数的表示法对于一阶导数为 y ′ &#xff0c;对于二阶导数为 y ′′&#xff0c;依此类推。ODE 的阶数等于 y 在方程中…

Springboot配置高级

临时属性设置 带属性数启动SpringBoot java –jar springboot.jar –-server.port80携带多个属性启动SpringBoot&#xff0c;属性间使用空格分隔 属性加载优先顺序 参看https://docs.spring.io/spring-boot/docs/current/reference/html/spring-boot-features.html#boot-fea…

pgadmin4中的备份与恢复

一&#xff0c;postgresql 数据的备份与恢复 &#xff08;一&#xff09;数据库备份与恢复 1&#xff0c;备份 windows环境 1> dump 逻辑备份 1&#xff0c;用管理员身份打开power shell 2&#xff0c;切换到本机 postgresql 安装目录下的 bin 目录&#xff1a; PS C…

GIT 常用指令

基础指令 $ git init #初始化仓库&#xff0c;在该文件夹创建的为workspace$ git add . #已暂存 [.通配符&#xff0c;全部添加]$ git commit -m "log add file" #提交到仓库,并写了日志 ”log add file“$ git status #查看状态&#xff0c;可查看被修改的文件…

Prometheus+Grafana+AlertManager监控SpringBoot项目并发送邮件告警通知

文章目录 PrometheusGrafanaAlertManager监控平台搭建新建SpringBoot项目为Prometheus提供指标新建项目&#xff0c;引入依赖新建接口&#xff0c;运行程序 推送指标到pushgateway 开始监控Grafana连接Prometheus数据源导入Grafana模板监控SpringBoot项目 邮件告警通知同系列文…

Windows如何部署Redis

一、简介 Redis (Remote Dictionary Server) 是一个由意大利人 Salvatore Sanfilippo 开发的 key-value 存储系统&#xff0c;具有极高的读写性能&#xff0c;读的速度可达 110000 次/s&#xff0c;写的速度可达 81000 次/s 。 二、下载 访问 https://github.com/tporadows…

字符串经典问题

1. 验证回文串 验证回文串 如果在将所有大写字符转换为小写字符、并移除所有非字母数字字符之后&#xff0c;短语正着读和反着读都一样。则可以认为该短语是一个 回文串 。 字母和数字都属于字母数字字符。 给你一个字符串 s&#xff0c;如果它是 回文串 &#xff0c;返回 t…

Vue2向Vue3过度核心技术computed计算属性

目录 1 computed计算属性1.1 概念1.2 语法1.3 注意1.4.案例1.5.代码准备 2 computed计算属性 VS methods方法2.1 computed计算属性2.2 methods计算属性2.3 计算属性的优势2.4 总结 3 计算属性的完整写法 1 computed计算属性 1.1 概念 基于现有的数据&#xff0c;计算出来的新属…

React Navigation 开发准备

需要 React Native 使用 React Navigation 的话&#xff0c;我们需要首先安装如下几个包&#xff1a; npm install react-navigation/native npm install react-native-screens react-native-safe-area-context开发之前做一些处理 如果您使用的是 Mac 并针对 iOS 进行开发&am…

探索AIGC人工智能(Midjourney篇)(一)

文章目录 案例图片 Midjourney注册 创建Discord账号 下载客户端 添加Midjourney到自己的服务器 用Midjourney画一只会飞的鸭子 Midjourney绘画指令 Midjourney绘画指令_激发Midjourney的创造力 Midjourney绘画指令_Seed指令 Midjourney光线关键词&#xff0c;打造震撼…

leetcode做题笔记98. 验证二叉搜索树

给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含 大于 当前节点的数。所有左子树和右子树自身必须也是二叉搜索树。 思路一&#xff1a;递归 …

软件宇宙中的星体:软件群星的闪耀

软件宇宙中的星体&#xff1a;软件群星的闪耀 引言 在当今信息时代&#xff0c;软件已经成为人类社会不可或缺的一部分。无论是移动应用、桌面软件、云计算平台&#xff0c;还是嵌入式系统&#xff0c;各种类型的软件构成了一个庞大而复杂的宇宙。这些软件就如同群星一样&…

MySQL 安装配置

MySQL 安装配置 MySQL 是最流行的关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司。 MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。 MySQL由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,一般中小型网站的开发都选择MySQL…

XGBoost,NVIDIA是什么

目录 XGBoost 算法层面 什么是 XGBoost GBDT是什么 GBDT中的GB 为何选择 XGBoost&#xff1f; XGBoost 的优势和属性 XGBoost 和数据科学家 为何 XGBoost 在 GPU 上表现更出色 XGBoost RAPIDS GPU 加速的 XGBoost NVIDIA是什么 使用 Spark XGBoost 的 GPU 加速端…

晨控CK-GW208与三菱L系列PLC以TCP通讯手册

晨控CK-GW208是一款支持标准工业以太网协议的IO-LINK主站网关&#xff0c;方便用户快速便捷的集成到 PLC 等控制系统中。 CK-GW208主站网关集成 8 路 IO-LINK 通信端口&#xff0c;采用即插即用模式&#xff0c;无需繁琐的配置&#xff0c;减轻现场安装调试的工作量。为了满足…

如何撰写具有传播力的品牌软文?

企业为了能将自己的品牌宣传推广出去&#xff0c;不论是在品牌初创还是成熟阶段都会撰写很多的新闻软文稿件发布在各大媒体平台上&#xff0c;为的就是能起到持续宣传和影响的效果&#xff01; 软文不但要求短小精悍&#xff0c;更注重内容的精准。不管是什么类型的文章&#…

android - fragment 数据丢失?状态丢失?

最佳答案 一些状态丢失的例子: 1. 假设您有一个按钮和一个 TextView 。在代码中&#xff0c;你已经定义了初始值为 0 的整数 i&#xff0c;它通过单击按钮递增 1&#xff0c;并且它的值显示在 TextView 中。假设你已经按下按钮 5 次&#xff0c;那么 textview 将被设置为 0。也…

数据库选型<1>

数据库选型 1.SQL与NoSQL1.SQL2.NoSQL 2.各种数据存储的适应场景1.MySQL 3.构建MySQL开发环境 1.SQL与NoSQL 1.SQL 关系型数据库 MySQLOracleSQL serverPostGreSQL 关系型数据库的特点 数据结构化存储在二维表中(新增JSON存储方式&#xff0c;也有nosql的特点)支持事务的原子…