自定义ant-design-vue中TABLE表格的展开图标 e

需求背景为表格嵌套子表格并可展开，隐藏掉子表中没数据的展开图标

首先ant-design-vue并没有提供对应的案例参考，按照文档的提示写法 expandIcon这个属性支持prop传参以及slot写法，但是实际测试下来并不能像expandedRowRender一样用slot来改写，阅读源码以后也验证了我的想法

然后在网上找寻了一些解决办法但都是以tsx写法进行的改写，为了一个图标还要改动项目配置支持tsx显然不太合适。

话不多说直接上代码

html：

<a-table class="table-outline-bordered" :columns="columns" :data-source="data" rowKey="id" :pagination="pagination" @change="handleTableChange" :expandIcon="customExpandIcon">
    <template slot="expandedRowRender" slot-scope="record" v-if="record.innerData && record.innerData.length > 0">
        <a-table class="table-outline-bordered" style="margin: -17px" :columns="innerColumns" :data-source="record.innerData" rowKey="cid" :pagination="false">
            <template slot="innerAction" slot-scope="text, crecord">
                   <a-button type="link" class="link-btn" @click="action(crecord, record)">操作</a-button>
            </template>
        </a-table>
    </template>
</a-table>

ts部分：

    customExpandIcon(props: any) {
        let { expanded, onExpand, record } = props;
        const h = this.$createElement;
        if (record.innerData && record.innerData.length > 0) {
            return h('div', {
                class: `ant-table-row-expand-icon ${expanded ? 'ant-table-row-expanded' : 'ant-table-row-collapsed'}`,
                attrs: {
                    role: 'button'
                },
                on: {
                    click: (event: Event) => {
                        onExpand(record, event);
                    }
                },
            });
        }
    }

这里用了ant-design-vue原来的按钮样式，这样就保证了展示效果上和原来的一样