需求背景為表格嵌套子表格并可展開(kāi)丹泉，隱藏掉子表中沒(méi)數(shù)據(jù)的展開(kāi)圖標(biāo)
首先ant-design-vue并沒(méi)有提供對(duì)應(yīng)的案例參考围辙，按照文檔的提示寫(xiě)法 expandIcon這個(gè)屬性支持prop傳參以及slot寫(xiě)法，但是實(shí)際測(cè)試下來(lái)并不能像expandedRowRender一樣用slot來(lái)改寫(xiě)，閱讀源碼以后也驗(yàn)證了我的想法
然后在網(wǎng)上找尋了一些解決辦法但都是以tsx寫(xiě)法進(jìn)行的改寫(xiě)鳞芙，為了一個(gè)圖標(biāo)還要改動(dòng)項(xiàng)目配置支持tsx顯然不太合適牺荠。
話不多說(shuō)直接上代碼
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原來(lái)的按鈕樣式，這樣就保證了展示效果上和原來(lái)的一樣
