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

一、开启展开行

通过设置 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);   }}
相关推荐
栈老师不回家40 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓3 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js