[JavaScript知识库] Vue3.0+ant-design表格自定义展开图标和展开行操作

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue3.0+ant-design表格自定义展开图标和展开行操作 -> 正文阅读

[JavaScript知识库]Vue3.0+ant-design表格自定义展开图标和展开行操作

前言

最近，公司技术栈转型，前端逐步过渡到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])
}