Vue 給el-table的某一行添加樣式

背景

最近在遇到一個需求：一個列表，每一條數據都有一個status狀態，只有status是完成，才能點擊展開expand,否則不能出現expand

詳見示例：https://codepen.io/shunzizhan/pen/YbMOwK

代碼實現

可以通過指定 Table 組件的 row-class-name 屬性來爲 Table 中的某一行添加 class，表明該行處於某種狀態。

設置擁有該樣式的行，expand爲display:none

.not-finish .el-table__expand-column .cell{
   display: none;
}

給行添加樣式

<el-table
    :data="tableData"
    :row-class-name="tableRowClassName"
    style="width: 100%">
    ...
</el-table>

調用行回調，結合對應的狀態，給行添加樣式

tableRowClassName({ row }) {
  if (row.status !== 0) {
    return 'not-finish';
  }
  return '';
},

參考文件

• el-table APi