解决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是将元素隐藏，但是在网页中该占的位置还是占着，具体用哪个，看个人需求~

 

恩 ，就酱～