Element-ui的Table表格展开行功能

业务需要表格能够展开某一行，但组件中只能展开所有行，或者用table的树形数据（row 中需包含 children字段），可以通过控制 row-class-name来定义表格中需要展开的行。

• 通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容

      
           
            
           

           
       

// 逻辑代码
  methods: {
    setClassName({row, rowIndex}){
    // 在这里写判断条件，控制哪些行可展开，那些行不可展开
        if(row.resObject == null){
          return 'hide-expand' // 不可展开
        }else{
          return '' // 可展开
        }
    },
  }

// css代码   不可展开的行既没有右箭头，也无法点击
.hide-expand .el-table__expand-column .cell {
  display: none;
}

• 示例图

image.png