一、开启展开行
通过设置 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 数组。
ruby
<el-table :data="tableList" :row-key="getRowKeys" :expand-row-keys="expands" >
</el-table>
2、初始化参数
javascript
data() { return { expands: [], //要展开的行,数值的元素是row的key值
}
}
3、在方法中使用
javascript
methods: { // 获取row的key值 getRowKeys(row) { return row.planId; },
// 在指定的回调方法中进行当前行赋值
handleSave(){
//this.currentID代表,刷新表格接口前,展开行的id
this.expands.push(this.currentID); }}