一、开启展开行
通过设置 type="expand" 和 Scoped slot
可以开启展开行功能,el-table-column
的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot
相同。
这步操作可以直接参考 ElementUI 官方示例
二、控制展开行
1、在table上添加
**row-key**
:行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id
,但不支持 user.info[0].id
,此种情况请使用 Function
。
**expand-row-keys**
:可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。
<el-table
:data="tableList"
:row-key="getRowKeys"
:expand-row-keys="expands"
>
</el-table>
2、初始化参数
data() {
return {
expands: [], //要展开的行,数值的元素是row的key值
}
}
3、在方法中使用
methods: {
// 获取row的key值
getRowKeys(row) {
return row.planId;
},
// 在指定的回调方法中进行当前行赋值
handleSave(){
//this.currentID代表,刷新表格接口前,展开行的id
this.expands.push(this.currentID);
}
}