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

本文介绍: 对于el–table 自带展开行，功能已经实现，但是每次操作之后el–table的展开行都关闭了这样用户体验很不友好。这是el–table不是很友好的地方，每次页面刷新都会默认关闭所有的行。希望：对于每次展开行的操作，操作之后该行继续展开。…

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

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

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

参考 element UI：Element – The world’s most popular Vue UI framework

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

1. 展示 tag 信息

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

&lt;el-table v-loading="loading" stripe :data="groupList"&gt;
      <el-table-column type="expand" prop="productData"&gt;
        <template slot-scope="scope"&gt;
          <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>

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

.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>

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

问题：

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

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

二、控制el-table展开行

1.expand–row–keys

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

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

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

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

2.在添加时更新 expands

在AddProdu ct（）时记录下当前的行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]]]]]]]]]");
},