element-ui的el-tabel组件使用type=“expand”实现表格嵌套时子表格没有数据的时候隐藏展开按钮

目录

 

一、问题描述：

二、实现方案: 使用getRowClass针对每一行添加类

---

一、问题描述：

element-ui的el-tabel组件使用type=“expand”实现表格嵌套时子表格没有数据的时候，发现下拉箭头还存在并可点击，下面实现

把下拉箭头隐藏并且隐藏掉的按钮不可点击

二、实现方案: 使用getRowClass针对每一行添加类

步骤一：添加className

methods: {
    // 下拉箭头是否显示
    getRowClass(row, rowIndex) {
      let data = row.row;
      let res = [];
      if (data.list && data.list.length > 0) {
        res.push('row-expand-has')
        return res;
      } else {
        res.push('row-expand-unhas')
        return res;
      }
    }
}

操作完发现row-expand-unhas已添加成功

步骤二：修改CSS样式

.row-expand-unhas .el-table__expand-column{
  pointer-events: none;
}
.row-expand-unhas .el-table__expand-column .el-icon{
  visibility:hidden;
}

pointer-events是为了阻止用户点击隐藏掉的下拉箭头按钮位置，不太清楚该属性的可以点击查看下面文章

详解css3 pointer-events（阻止hover、active、onclick等触发事件）

 觉得对您有帮助给一个 赞 哦~~