解決Vue的表格中，expand只有某些行需要展開的問題。

element UI里的表格里，type="expand"的話，所有行都有展開的選項，然而實際中有些行根據判斷不需要展開，而element目前對這個問題還不是很友好，現在有個可以通過CSS解決的方法來解決這個問題。

 

html

<el-table :data="tableData5" style="width: 100%" :row-class-name="setClassName">
    <el-table-column type="expand">...</el-table-column>
</el-table>

 

js

data() { return { tableData5: [{ id: '12987122', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優質淡奶，奶香濃而不膩', address: '上海市普陀區真北路', shop: '王小虎夫妻店', shopId: '10333', expand: true }, { id: '12987123', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優質淡奶，奶香濃而不膩', address: '上海市普陀區真北路', shop: '王小虎夫妻店', shopId: '10333', expand: false }, { id: '12987125', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優質淡奶，奶香濃而不膩', address: '上海市普陀區真北路', shop: '王小虎夫妻店', shopId: '10333', expand: true }, { id: '12987126', name: '好滋好味雞蛋仔', category: '江浙小吃、小吃零食', desc: '荷蘭優質淡奶，奶香濃而不膩', address: '上海市普陀區真北路', shop: '王小虎夫妻店', shopId: '10333', expand: false }] } }, methods:{ setClassName({row, index}){ // 通過自己的邏輯返回一個class或者空
        return row.expand ? 'expand' : ''; }, }

 

css

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

 

或者另一種方法~

html

<el-table :data="tableData5" style="width: 100%" :row-class-name="getClassName">
    <el-table-column type="expand">...</el-table-column>
</el-table>

css

 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(' ') */
  }

style

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

 

上面兩種方法效果是一樣的，只不過第一種通過display：none將元素的顯示設為無，即在網頁中不占任何的位置。而第二種visibility: hidden是將元素隱藏，但是在網頁中該占的位置還是占着，具體用哪個，看個人需求~

 

恩 ，就醬～