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

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

例子：

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原来的按钮样式，这样就保证了展示效果上和原来的一样。 在网上找了找了很久都没找到想要的答案，终于看到一篇和我想的一样的了。
文章来自snakeninja110的www.jianshu.com/p/27a04cb02…
学习记录使用，详情请看原文