业务需要表格能够展开某一行，但组件中只能展开所有行，或者用table的树形数据（row 中需包含 children字段），可以通过控制 row-class-name来定义表格中需要展开的行。
- 通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容
<el-table
:row-class-name="setClassName"
:data="paramsTableData">
<el-table-column
fixed="left"
type="expand" // 给当前clumn设置
width="30"
align="center"
>
<template slot-scope="props">
<pre class="pre2" >{{props.row.resObject}}</pre> // 展开时显示的内容
</template>
</el-table-column>
<template v-for="item of tableList">
<div :key="item.prop">
<el-table-column
min-width="110"
:show-overflow-tooltip="true"
align="center"
:prop="item.prop"
:label="item.label"
/>
</div>
</template>
</el-table>
// 逻辑代码
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
