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

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

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

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

        :row-class-name="getRowClass"

《element表格折叠根据折叠项展示与隐藏》
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;
    }

以实现隐藏效果,如下:

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

    原文作者:薇薇
    原文地址: https://segmentfault.com/a/1190000020312911
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞