element表格折叠根据折叠项展示与隐藏

开发中遇到问题,想把部分内容放在折叠项内,如下图:

但是有的折叠项里没有内容想隐藏掉,这样可明了哪个里面有内容,方法如下:
在table里加上

        :row-class-name="getRowClass"


getRowClass方法如下:

         getRowClass(row, index) {
            let res = [];
            if (!row.row.descJson&&!row.row.mac&&!row.row.openPort.tcp.length&&!row.row.openPort.udp.length){
                res.push('row-expand-cover');
            }
            return res.join(' ') ;
        },

其中if里的条件是指符合什么条件时不展示。
接下来定义样式:

    .row-expand-cover .el-table__expand-column .el-icon{
        visibility:hidden;
    }

以实现隐藏效果,如下:

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理