如何在 Element UI 中的表中保持行扩展

Question

我有一个来自 element-ui 的可拖动表格：

 <table-card>
      <el-table-draggable @drop="changeDossiertypesOrder" handle=".handler">
        <el-table
          :data="dossiertypes"
          v-loading="dossiertypesLoading"
          row-key="id"
          :expand-row-keys="expandRowKeys"
          @expand-change="handleExpandChange"
        >
          <el-table-column type="expand">
</el-table-column>
        </el-table>
      </el-table-draggable>
    </table-card>

<el-dialog      
  :visible.sync="modalVisibility"
  :close-on-click-modal="false"
  :show-close="false"
  @open="resetForm"
  @opened="$refs.defaultField[0].focus()"
  @closed="resetForm"
>

  <template v-slot:footer>
    <div>
      <c-button type="primary" icon="check" @click="saveType" :loading="isSaving.editType">Save
      </c-button>
    </div>
  </template>
</el-dialog>

目前，在我单击按钮（showEditType）并编辑和保存后，所有扩展行都将返回到它们自己的初始状态。单击按钮后，我希望所有打开的行再次保持扩展状态。

这是手柄

handleExpandChange(row, expandedRows) {
      const id = row.id;
      const lastId = this.expandRowKeys[0];
      // disable mutiple row expanded
      this.expandRowKeys = id === lastId ? [] : [id];
    },

这是我的 saveType 函数 保存类型() { this.isSaving.editType = true;

  axios
    .put()
    .then(() => {
      this.expandRowKeys = [...this.expandRowKeys];
    })
    .finally(() => {
      this.isSaving.editType = false;
    });
},

Answer 1

我也遇到这个问题了

我通过添加解决了这个问题

：行键=“row_key”

进入el-table标签

另外，添加 row_key 方法：

row_key(row) {
      return row.id
    }

希望这有帮助