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

news2024/11/15 16:43:35

实现思路:通过配置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.coloradmin.cn/o/931123.html

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

相关文章

IDEA 配置注释模板

目录 一、配置类模板注释 二、配置方法注释 一、配置类模板注释 打开IDEA&#xff0c;打开settings(快捷键&#xff1a;Ctrl Alt s)&#xff0c;选择Editor&#xff0c;找到File and Code Templates&#xff0c;设置需要配置注释的文件类型&#xff0c;如下图所示&#xf…

深入剖析Kubernetes之Pod的实现原理

文章目录 概述Pod 的实现原理容器设计模式容器与虚拟机 Pod 的本质&#xff1a;Pod&#xff0c;实际上是在扮演传统基础设施里“虚拟机”的角色&#xff1b;而容器&#xff0c;则是这个虚拟机里运行的用户程序。 概述 容器&#xff0c;就是未来云计算系统中的进程&#xff1b;…

CSDN编程题-每日一练(2023-08-26)

CSDN编程题-每日一练&#xff08;2023-08-26&#xff09; 一、题目名称&#xff1a;排查网络故障二、题目名称&#xff1a;贪食四人帮三、题目名称&#xff1a;阿波罗的魔力宝石 一、题目名称&#xff1a;排查网络故障 时间限制&#xff1a;1000ms内存限制&#xff1a;256M 题目…

一文彻底告别 C盘 红色风景线

前言 想必使用 Windows 的用户肯定遇到过 C盘 爆满的问题吧&#xff0c;感觉平时我们也没有怎么使用 C盘 &#xff0c;但是 C盘 却总是慢慢成长&#xff0c;最后留给我们的就是一道靓丽的红色风景线。不过不用担心&#xff0c;相信读完本文后&#xff0c;在座的各位都可以永久…

精选6个C++项目,推荐新人练手首选!

无论做什么项目&#xff0c;在写简历时&#xff0c;最好要整理出项目中的技术点&#xff0c;思考如何跟面试官介绍你的项目&#xff0c;要经得起面试官的提问。项目的话&#xff0c;可以考虑做下面的这几个&#xff1a; 如果你想给自己的简历增加C 项目经验,以下提供一些方向指…

【C++奇遇记】函数模板

&#x1f3ac; 博客主页&#xff1a;博主链接 &#x1f3a5; 本文由 M malloc 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;LeetCode刷题集 数据库专栏 初阶数据结构 &#x1f3c5; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如…

高效PDF校对:释放高质量内容的力量

在数字化世界中&#xff0c;内容是王者。随着企业和个人越来越依赖数字文档进行沟通、分享和创新&#xff0c;我们在PDF中传递的内容的质量变得至关重要。在这里&#xff0c;我们将探索高效的PDF校对如何帮助您释放高质量内容的真正潜力。 超越仅仅是“正确” 当我们谈论PDF校…

MBR400100CT-ASEMI肖特基模块400A 100V

编辑&#xff1a;ll MBR400100CT-ASEMI肖特基模块400A 100V 型号&#xff1a;MBR400100CT 品牌&#xff1a;ASEMI 封装&#xff1a;M2 恢复时间&#xff1a;&#xff1e;50ns 正向电流&#xff1a;400A 反向耐压&#xff1a;100V 芯片个数&#xff1a;2 引脚数量&…

Leetcode77. 组合

给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 回溯剪枝 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 class Solution {public List<List<Integer>> combine(int n, i…

展锐A13 Camera Hal dispatch模块流程 --- 上

4月份就知道展锐A13的Camera Hal有大的变动&#xff0c;但是最近一直在做一个MTK的项目&#xff0c;没去看这个新增部分的流程。最近有时间&#xff0c;就把A13上Camera Hal新增的部分流程捋 了一下&#xff0c;过程是痛苦的&#xff0c;但是坚持一遍遍去读代码&#xff0c;在结…

移动,电信,联通流量卡该怎么选?

是电信便宜&#xff0c;移动稳定&#xff0c;还是联通性价比高&#xff1f; ​ 今天&#xff0c;小编从三大流量卡的优缺点方面来讲&#xff0c;教你如何选择流量卡了。 一、移动流量卡 优点&#xff1a;信号好&#xff0c;可以说走到什么地方都有信号。 缺点&#xff1a;资…

Leaflet开发入门

Leaflet开发入门 开发环境配置Leaflet开发库开发移动端Hybrid App或移动Web App 开发环境配置 电子地图已经渗透到O2O、生活服务、出行等领域&#xff0c;传统的GIS也孕育着互联网基因。在国内互联网电子地图领域&#xff0c;百度地图和高德地图较为出色&#xff0c;天地图作为…

js的使用之时间如何定义,窗口加载事件

1.时间如何定义 1.1 date的其他的属性 带出星期几的写法 var arr [星期日,星期一,星期二,星期三,星期四,星期五,星期六,星期天] var day date.getDay(); console.log(arr[day]); 1.2 日期的格式化 1.3 时分秒的写法 固定写法&#xff1a;如果想要写成00:00:00这种形式&am…

阿里云服务器搭建FRP实现内网穿透-P2P

前言 在了解frp - p2p之前&#xff0c;请先了解阿里云服务器搭建FRP实现内网穿透-转发: 文章地址 1、什么是frp - p2p frp&#xff08;Fast Reverse Proxy&#xff09;是一个开源的反向代理工具&#xff0c;它提供了多种功能&#xff0c;包括端口映射、流量转发和内网穿透等。…

cmake 交叉编译应用程序:手动设置链接脚本

前言 在使用 cmake 交叉编译应该应用程序时&#xff0c;好像没有手动设置【链接脚本】&#xff0c;也能正常构建生成 Makefile&#xff0c;并且可以正常 Make 生成需要的 应用程序。 但是有些应用程序&#xff0c;需要手动指定【链接脚本】&#xff0c;比如修改链接地址&#…

五、多表查询-5.自连接

一、语法 二、演示-自连接&#xff08;内连接&#xff09; 【例】查询员工 及其 所属领导的名字&#xff08;managerid&#xff0c;领导也是员工表emp1表中的数据&#xff09; &#xff01;&#xff01;必须起别名&#xff01;&#xff01; ——内连接只查询交集部分的数据 …

微调真香,漫画科技博主竟然在用国产大模型生成系列漫画女主角

有一说一&#xff0c;《微调真香&#xff0c;漫画科技博主竟然在用国产大模型生成系列漫画女主角》不是标题党。 连我也不得不相信&#xff0c;作为“亲爱的数据”创始人&#xff0c;我确实在用人工智能大模型生成自家特有风格的漫画。 市面上&#xff0c;海内外&#xff0c;用…

HAproxy服务及keepalived+haproxy高可用

本节主要学习AHproxy 的概述&#xff0c;安装&#xff0c;调度算法&#xff0c;配置文件&#xff0c;负载均衡&#xff0c;配置syslog日志&#xff0c;keepalivedhaproxy实现高可用。 目录 一、概述 1、简介 2、核心功能 3、关键特性 4、应用场景 二、安装 1.内核配置 …

【附安装包】Marvelous designer12|3D服装设计

软件下载 软件&#xff1a;Marvelous designer版本&#xff1a;12语言&#xff1a;简体中文大小&#xff1a;1.49G安装环境&#xff1a;Win11/Win10/Win8/Win7硬件要求&#xff1a;CPU2.0GHz 内存4G(或更高&#xff09;下载通道①百度网盘丨64位下载链接&#xff1a;https://p…

X(推特)推出招聘平台,马斯克进军招聘领域,欲对标 LinkedIn

8 月 26 日&#xff0c;埃隆・马斯克接手 X&#xff08;推特&#xff09;后&#xff0c;开启了一系列备受争议的变革&#xff0c;并多次在公开场合表示希望将 X 打造成为超级应用&#xff0c;受人瞩目。除了私信中推出了视频聊天和语音聊天功能之外&#xff0c;X 在今天宣布上线…