Vue3.0+ant-design表格自定义展开图标和展开行操作

前言

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

问题描述

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

问题解决

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

<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>

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

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

5. 解决展开行的问题

<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（我一开始用的这个，没成功）

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

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

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