html表格展开明细,Element-ui的Table表格展开行功能

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

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

:row-class-name="setClassName"

:data="paramsTableData">

fixed="left"

type="expand" // 给当前clumn设置

width="30"

align="center"

>

{{props.row.resObject}}

// 展开时显示的内容

min-width="110"

:show-overflow-tooltip="true"

align="center"

:prop="item.prop"

:label="item.label"

/>

// 逻辑代码

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