【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行

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

目录

一、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">
            <div
              class="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-button
                class="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可以记录数组，以上只希望记录并保存选中添加行的展开状态。可以根据需要进行修改。