于极迷处识迷 则处处醒，将难放怀一放 则万境宽。

目录

一、el-table展开行（基础 可跳过）

1. 展示tag信息

2. 实现添加功能

问题：

二、控制el-table展开行（核心）

1.expand-row-keys

2.在添加时更新expands

效果比较：

修改前：刷新表格，展开行消失 ==> 修改后：刷新表格，保存当前操作展开行。

一、el-table展开行（基础 可跳过）

参考element UI：Element - The world's most popular Vue UI framework

通过设置 type="expand" 和Scoped slot可以开启展开行功能，el-table-column的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的Scoped slot相同。

1. 展示tag信息

效果：每行组合数据展示包含的产品名称信息。后端返回的数据结构如下：

<el-table v-loading="loading" stripe :data="groupList"><el-table-column type="expand" prop="productData"><template slot-scope="scope"><div class="tag-content"><divclass="tag-item":key="tag.prdtName"v-for="tag in scope.row.productData"><el-tag closable style="margin: auto" type="danger">{{tag.prdtName}}</el-tag></div></div></template></el-table-column><el-table-column label="序号" prop="index" width="55"><template slot-scope="scope"><span>{{ scope.$index + 1 }}</span></template></el-table-column><el-table-column label="组合编号" align="center" prop="groupCode" /><el-table-column label="组合名称" align="center" prop="groupName" /><el-table-column label="产品个数" align="center" prop="productNum" /></el-table>

至此可以完成全部tags的展示，且满足样式要求一行只展示三个。

.tag-item {width: 33%;margin-bottom: 10px;display: flex;justify-content: center;}

2. 实现添加功能

只需要在刚才代码的后面添加tag实现新增功能即可

<div class="tag-item"><el-buttonclass="button-new-tag"size="small"@click="AddProduct(scope.row)">+ 新产品</el-button></div>

addProduct（）函数中主要：显示dialog==> 清空弹框form表单

问题：

功能已经实现，但是每次操作之后el-table的展开行都关闭了这样用户体验很不友好。这是el-table不是很友好的地方，每次页面刷新都会默认关闭所有的行。

希望：对于每次展开行的操作，操作之后该行继续展开。

二、控制el-table展开行

1.expand-row-keys

expand-row-keys：可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。

实现思路：创建一个expends数组，用于存储展开的keys。每次点击添加时，将该行的id存放进去。

只需要给table添加如下两行代码

row-key="id":expand-row-keys="expands"

2.在添加时更新expands

在AddProduct（）时记录下当前的行id

// 添加产品对话框AddProduct(row) {this.open = true;this.groupId = row.id;// 表格置空this.form = {};// console.log(this.expands, "[[[[[[expends]]]]]]]]]");this.expands = [];this.expands.push(row.id);// console.log(this.expands, "[[[[[[expends]]]]]]]]]");},

当然expends可以记录数组，以上只希望记录并保存选中添加行的展开状态。可以根据需要进行修改。