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

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

&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-item {
  width: 33%;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}

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

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

// 添加产品对话框
    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]]]]]]]]]");
},