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);   }}
相关推荐
泰山小张只吃荷园4 分钟前
期末Python复习-输入输出
java·前端·spring boot·python·spring cloud·docker·容器
悦涵仙子39 分钟前
vueuse中的useTemplateRefsList
前端·javascript·vue.js
萧萧玉树39 分钟前
分布式在线评测系统
前端·c++·后端·负载均衡
haima951 小时前
ubuntu安装chrome无法打开问题
前端·chrome
放逐者-保持本心,方可放逐1 小时前
XSS 与 CSRF 记录
前端·xss·csrf·浏览器安全
徊忆羽菲1 小时前
利用HTML5和CSS来实现一个漂亮的表格样式
前端·css·html5
不爱说话郭德纲1 小时前
Stylus、Less 和 Sass 的使用与区别
前端·css·面试·less·sass·stylus
凄凄迷人1 小时前
如何调试 chrome 崩溃日志(MAC)
前端·chrome·macos·crash
蒙特网站2 小时前
网站布局编辑器前端开发:设计要点与关键考量
前端·javascript·学习·html
理想不理想v2 小时前
前端开发工程师需要学什么?
java·前端·vue.js·webpack·node.js