ant-design-vue table嵌套表格，自定义展开图标

背景

近期有一个需求，需要有嵌套表格的场景， 使用 ant-design-vue UI ， 嵌套子表格，可能会存在子表格没有数据的情况， 之前没有怎么使用过这个UI库

要解决的问题：

1. 子表格没有数据，不展示展开图标
2. 子表格没有数据，不显示

版本说明

使用的环境说明

"vue": "^2.6.14"
"ant-design-vue": "^1.7.8"
"node": "v14.19.3"

完整代码

<template>
	<a-table
		:columns="columns"
		:data-source="data"
		:rowSelection="rowSelection"
		:pagination="false"
	>
        <!-- 自定义展开图标 -->
        <template slot="expandIcon" slot-scope="row">
            <!-- 如果嵌套的子表格没有数据，则不展示展开图标 -->
            <template v-if="row.record.list.length">
                <!-- 自定义 换了一个图标 -->
                <!-- <a-icon type="plus-circle" @click="getRows(row)" /> -->

                <!-- 如果需要官网的 ( - + ) 这种图标效果， 稍微改造一下 expanded  -》 true  表示展开； false 表示收起 -->
                <a-icon
                    type="plus"
                    v-show="!row.expanded"
                    @click="getRows(row, $event)"
                />
                <a-icon
                    type="minus"
                    v-show="row.expanded"
                    @click="getRows(row, $event)"
                />
            </template>
        </template>

        <a-table
            slot="expandedRowRender"
            slot-scope="record"
            :columns="innerColumns"
            :data-source="record.list"
            :pagination="false"
            :rowSelection="childRowSection"
            v-if="record.list.length"
        >
            <span slot="status" slot-scope="row">
                <a-badge status="success" />{{ row.status }}
            </span>

            <!-- 操作列 -->
            <span slot="operation" slot-scope="innerRow" class="table-operation">
                <a-button @click="onGetInnerRow(innerRow, record)">操作</a-button>
            </span>
        </a-table>
	</a-table>
</template>

<script>
const columns = [
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Platform', key: 'platform' },
    { title: 'Version', key: 'version' },
    { title: 'Upgraded', key: 'upgradeNum' },
    { title: 'Creator', key: 'creator' },
    { title: 'Date', key: 'createdAt' },
    { title: 'Action', key: 'operation' },
]

const data = []

data.push({
	key: 1,
	name: '外层的' + 1,
	platform: 'iOS',
	version: '10.3.4.5654',
	upgradeNum: 500,
	creator: 'Jack',
	createdAt: '2014-12-24 23:12:00',
	list: [
            {
                key: 10,
                index: 1,
                date: '2014-5555',
                name: '滴滴滴',
                upgradeNum: '888',
                status: '正常',
            },
            {
                key: 133,
                index: 2,
                date: '2014-12-24 23:12:00',
                name: 'deng的你',
                upgradeNum: '985959',
                status: '正常',
            },
	],
})

data.push({
	key: 2,
	name: '你好-' + 2,
	platform: 'iOS',
	version: '10.3.4.5654',
	upgradeNum: 12323,
	creator: 'Jack',
	createdAt: '阿斯达',
	list: [
            {
                key: 212,
                date: '2014-12-24 23:12:00',
                name: '张安',
                upgradeNum: '阿斯大苏打',
                status: '正常',
            },
	],
})

data.push({
	key: 3,
	name: '空子元素-' + 2,
	platform: 'iOS',
	version: '空的子项',
	upgradeNum: 12323,
	creator: 'Jack',
	createdAt: '2022222',
	list: [],
})

const innerColumns = [
    { title: '日期', dataIndex: 'date', key: 'date' },
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '状态', key: 'state', scopedSlots: { customRender: 'status' } },
    { title: '更新状态', dataIndex: 'upgradeNum', key: 'upgradeNum' },
    {
        title: 'Action',
        // 使用slot 这里不能要dataIndex
        // dataIndex: 'operation',
        key: 'operation',
        scopedSlots: { customRender: 'operation' },
    },
]

export default {
    data() {
        return {
            data,
            columns,
            innerColumns,
            rowSelection: {
                onSelect(record, selected, selectedRows, nativeEvent) {
                        console.log(record)
                },
            },
            childRowSection: {
                onSelect(record, selected, selectedRows, nativeEvent) {
                    console.log('子表格')
                    console.log(selectedRows)
                },
            },
        }
    },
    methods: {
        getRows(props, event) {
            console.log(props)

            props.onExpand(props.record, event)
        },
        /**
        * @param {Object} row 子表格的数据行
        * @param {parentRow} row 父表格行数据
        */
        onGetInnerRow(row, parentRow) {
            console.log(row)
            console.log(parentRow)
        },
    },
}
</script>

onExpand 在官方文档-table 是没有写的，需要看源码中才知道参数怎么传递

说明： 项目如果没有配置jsx语法的支持，也就是没有配置babel的， 请使用上面 template的写法。

jsx写法

data() {
    return {
        // jsx 写法
        expandIcon(row) {
           if (!row.expanded) {
           // 收起状态
               return (
                   <a-icon type="plus" onClick="{e => this.getRows(row, e)}"/>
               )
           } else {
           // 展开状态
               return (
                   <a-icon type="minus" onClick="{e => this.getRows(row, e)}"/>
               )
           }
            
        }
    }
}

效果图