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

 

恩 ，就酱～