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

一枚前端小姐姐2024-02-20 16:49

一、开启展开行

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