Vue3.0+ant-design表格自定义展开图标和展开行操作_antd table设置只点击图标才展开点击行不展开-程序员宅基地

技术标签： TypeScript ant-design vue3.0 vue.js typescript

前言

最近，公司技术栈转型，前端逐步过渡到Vue3.0上来，在做angular之前自己虽然使用过一段时间的vue，但那时都是Vue2.0+Element-UI，所以这些东西对于自己来说也是一个新的内容，开发过程中也遇到了很多坑，下面给大家做一些分享，有不到的地方欢迎大家指正

问题描述

当时我从业务那里拿到的需求是开发一个列表，其中嵌套得有子列表，默认是不展开的，点击展开按钮会展开当前行子表格，其他行不受影响，如果已经有展开行，就会关闭此前的展开行，展开当前点击行。
我的第一版代码就是把列表开发出来，然后添加了子表格这里有demo，我也是按照这上面的钱套子表格去写的，但我的数据和他不一样，我的数据相当于是在附列表的每一行元素里都有一个子列表属性，该子列表length大于零，我就展示可展开小图标（可展开），没有我就不展示（不可展开）
我按照案例上开发结束后，有两个问题，一是：展开图标会一直展示，二是：当我点击展开图标时所有行都会展开

问题解决

首先解决展开图标会一直展示这个问题，这个其实逻辑很简单，就是判断子列表是否存在并且length大于零
这个时候我看了几篇文章使用ant组件中的表格，嵌套表格展开时数据污染，只展开当前行，后面这一个好像也是3.0的Ant Design Vue子表格展开只展开一行，其他行折叠，我当时看的那篇找不到了，那是一篇2.0的写法
下面看我的方法吧，我用的自定义小图标

<template #expandIcon="{ column, record, index }">
  	<PlusSquareOutlined
        v-if="ArrayUtil.isNotNull(record.creditList) && expandedRowKeys.indexOf(record.applyId) === -1"
        @click="expand(record.applyId)">
    </PlusSquareOutlined>
    <MinusSquareOutlined v-if="expandedRowKeys.indexOf(record.applyId) !== -1" @click="expand('')">
    </MinusSquareOutlined>
</template>

注意上面用到的小图标都必须在ts或者js文件中引用，我们使用的是ts

// 注意下面这个写法，这样写就不用在script标签中写setUp函数了
// 如果使用了setUp函数还需要在components中声明这两个组件（组建于组件之间不要有任何标点符号，直接回车），还需要return这两个组件
<script lang="ts" setup>
	import {
     PlusSquareOutlined, MinusSquareOutlined } from '@ant-design/icons-vue'
</script>

解决展开行的问题

<!-- 先看一下table标签要配置的一些属性 -->
<a-table :columns="columns" :data-source="cvmList" :pagination="false" :loading="loading" rowkey="{(record: CvmApplyListBO) => {return record.applyId}}" :defaultExpandedRowKeys="expandedRowKeys" ></a-table>

针对上面的代码做一下解释：
（1）:columns=“columns” :data-source=“cvmList” :pagination=“false” :loading=“loading”，这是些基础配置，看下API就好了
（2）rowkey=“{(record: CvmApplyListBO) => {return record.applyId}}”
在这里插入图片描述
（3）:defaultExpandedRowKeys=“expandedRowKeys”，默认展开的行，和这个相关的还有个expandedRowKeys（我一开始用的这个，没成功）

下面是一些变量声明和逻辑

const expandedRowKeys = reactive<string[]>([])
/**
 * 点击展开行图标
 * @param applyId 点击行的唯一key
 */
function expand(applyId: string) {
    
    Object.assign(expandedRowKeys, [applyId])
}

针对上面的方法做一下解释,主要是Object.assign():
(1) Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
(2) 主要还是为了深拷贝，因为直接赋值可能会影响到reactive对象的双向绑定

本文链接：https://blog.csdn.net/m0_56026872/article/details/125255907

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

[激光原理与应用-74]：数据采集卡 - 数模转换芯片AD7606_高速数据采集adc-程序员宅基地

文章浏览阅读1.6k次，点赞20次，收藏24次。AD7606是一款由Analog Devices（ADI）公司生产的16通道高速模拟数字转换器（ADC）芯片。该芯片采用了SAR（逐次逼近寄存器）架构，可以将模拟信号转换为数字信号。AD7606具有16个单端/8个差分输入通道，并支持可编程增益放大器和内部参考电压。它的转换速率可高达200 kSPS，并通过串行接口（SPI）与微控制器MCU或数字信号处理器（DSP）进行通信。该芯片具有广泛的应用领域，包括数据采集系统、仪器仪表、工业自动化、医疗设备等。_高速数据采集adc

yolov2训练_[人工智能]Mxyolov3 0.1版本发布，轻松训练K210模型-程序员宅基地

文章浏览阅读6.6k次，点赞13次，收藏73次。Mx-yolov3在过去的一段时间里，收到了许多反馈和BUG，但由于各种原因，很久没有去更新Mx-yolov3；经过几天的修改和改进，新的版本诞生了，我们将它定为1.0版本(你可以在软件界面右下角看到版本号，为了今后能更好的识别软件版本，新版本的软件您可以在“Import 创客”公众号中发送"Mx3"以此来获得下载链接)；下面我们就来看看1.0版本做了哪些改进和修复。01改进和修复#增加..._yolov2.tflite 转kmodel

El表达式详解-程序员宅基地

文章浏览阅读105次。EL表达式 1、EL简介1）语法结构 ${expression}2）[]与.运算符 EL 提供.和[]两种运算符来存取数据。当要存取的属性名称中包含一些特殊字符，如.或?等并非字母或数字的符号，就一定要使用 []。例如： ${user.My-Name}应当改为${user["My-Name"] } ..._el解析

pytorch学习记录_[exception|indice_conv|subm]feat=torch.size([47693-程序员宅基地

文章浏览阅读401次。1、shape与size()print('*' * 100)print('查看数据形状')data1 = torch.randn((7,3,32,32))print("shape:",data1.shape)print("size:",data1.size())查看数据形状shape: torch.Size([7, 3, 32, 32])size: torch.Size([7, 3, 32, 32])2、squeeze与unsqueeze#压缩print('*' * 100)p_[exception|indice_conv|subm]feat=torch.size([47693, 16]),w=torch.size([7, 7,

一个python实现的kline-chart图表程序（一）_python使用kimi chart-程序员宅基地

文章浏览阅读230次。至于MA,MACD,VOL这些应该属于指标，可以从基础数据计算得来或是直接加载，当然可加载的还有其它一些指标，比如买卖点或是直线，射线，线段或是矩形什么的。最好能把这个框架高度模块化，然后想计算什么指标直接加进去，或是做个什么插件，嗯，插件这一块明显还不熟，先做到高度封装的Kline再说。起因是想研究量化交易，然后核查算法的落角点，比如哪些指标的组合可以入场做单，没有一个形象化的工具算法写起来总是感觉差强人意。初步想法是需要一个数据串，里面记录一组开高低收量，然后打开程序后可以将这个基础数据显示成K线。_python使用kimi chart

报错cv2.error: OpenCV(4.1.2) error: (-215:Assertion failed) !_img.empty() in function 'cv::imwrite'-程序员宅基地

文章浏览阅读1.3w次。Traceback (most recent call last):File "D:/FER/FacePP/decode_json.py", line 174, in <module>demonstrate(r'C:\Users\user-pc\Documents\Dataset\FER\JsonFiles\FacePP\BBQNR\S3\angry\13342.jso..._error: (-215:assertion failed) !_img.empty() in function 'cv::imwrite

随便推点

为什么未来的趋势是全栈运营-程序员宅基地

文章浏览阅读453次。感谢关注天善智能，走好数据之路↑↑↑欢迎关注天善智能，我们是专注于商业智能BI，大数据，数据分析领域的垂直社区，学习，问答、求职一站式搞定！全栈的概念起源于全栈工程师，英文Full Stack Developer。指代掌握多种技能，并且能够用这些技能独立完成产品。当我们说就差一个程序员的时候，需要的其实是一位全栈工程师。可能你已经理解我说的全栈运营的概念，全栈运营即运营多...

Kafka源码调试（二）：编写简单测试客户端程序，以及发送事务消息的日志留档_kafka日志输出发送的消息-程序员宅基地

文章浏览阅读358次。1. 写一个测试客户端，采用流式应用的典型 “consume-transform-produce” 模式2. 记录 Kafka broker 节点日志，客户端日志等用于后续文章参照对比_kafka日志输出发送的消息

Android12 MTK平台禁用SCTP协议_android sntp 禁用-程序员宅基地

文章浏览阅读831次，点赞22次，收藏23次。【代码】Android12 MTK平台禁用SCTP协议。_android sntp 禁用

2022 年 MathorCup 高校数学建模挑战赛——大数据竞赛赛道赛道 B：北京移动用户体验影响因素研究_影响客户语音业务和上网业务满意度的主要因素-程序员宅基地

文章浏览阅读543次，点赞4次，收藏5次。详细介绍采用信息增益率、XGBoost、随机森林综合筛选特征。_影响客户语音业务和上网业务满意度的主要因素

哈夫曼码编/译码系统-程序员宅基地

文章浏览阅读991次，点赞22次，收藏24次。编写一个哈夫曼码的编/译码系统，实现对输入的文本信息自动统计并依此为依据建立一个哈夫曼码的编/译码系统。

Revisiting Salient Object Detection: Simultaneous Detection, Ranking, and Subitizing of Multiple Sal_salient object ranking-程序员宅基地

文章浏览阅读1.2k次，点赞2次，收藏3次。问题：作者认为，显著性目标检测领域迄今为止的工作解决的是一个相当病态的问题。即不同的人对于什么是显著性目标没有一个普遍的一致意见。这意味着一些目标会比另一些目标更加显著，并且不同的显著性目标中存在着一个相对排名。本文方法：本文方法解决了考虑了相对排名这个更普遍的问题，并且提出了适合于衡量该问题的数据与度量方法，本文解决方案是基于相对显著性和分段式细化的分层表示的深度网络。该网络也可以解..._salient object ranking