el-table嵌套,根据字段,隐藏:子table的下拉列表按钮

 

需求:

当一条数据的证件个数没有时,隐藏他的子table下拉列表/按钮;

解决思路:

1.为每条数据设置row-class-name

2.给class设置样式即可

解决办法:

1.给主el-table设置row-class-name的方法

//el-table塞入方法:

:row-class-name="getRowClass"


// methods中的方法:
getRowClass(row) {
    let data = row.row;
    let res = [];
    if (data.attachmentList.length>0) {
        res.push('row-expand-has');
        return res;
    } else {
        res.push('row-expand-unhas');
        return res;
    }
},

这时我们就可以看到每条数据的区分了!

 

2.设置样式

这一步更简单,我们将row-expand-unhas里面的el-table__expand-column给隐藏掉即可!

 

<style>
  .row-expand-unhas .el-table__expand-column {
    pointer-events: none;
  }

  .row-expand-unhas .el-table__expand-column .el-icon {
    visibility: hidden;
  }
</style>

结束!!