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等觸發事件）

🎉 覺得對您有幫助給一個 贊 哦~~ 🎉