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

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

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

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

话不多说直接上代码

html:


    

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原来的按钮样式,这样就保证了展示效果上和原来的一样

你可能感兴趣的:(自定义ant-design-vue中TABLE表格的展开图标 expandIcon 改写)