element-ui的el-tabel組件怎么使用type=“expand”實現表格嵌套並且在子表格沒有數據的時候隱藏展開按鈕


效果如下:

 

試過很多種辦法,思路都在怎么控制<el-table-column type="expand">里面的type上,比如使用v-show等等,但是發現,要不就是展開圖標全部沒有,要不就是全部有,研究好久,終於想出來這么個辦法:

使用getRowClass針對每一行添加類,

  getRowClass(row, index) {
    let res = []
    if (!row.children)//即改行沒有子元素時,添加row-expand-cover類
      res.push('row-expand-cover')
    /* if (row.operate == 2)
      res.push('hide-row')
    return res.join(' ') */
  }

然后設置該類的樣式,把沒有子元素的行的expand圖標隱藏:

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM