el-table 展开行 type="expand" 刷新表格时,保留当前展开行

1,161 阅读1分钟

一、开启展开行

通过设置 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);
   }
}