解决vue3+element-plus 使用table 展开行时，删除或更新展开行中的数据，展开行自动合闭的问题

问题描述

在使用element-plus 中的table 展开行时，会有这种需求：修改完数据之后，可以直接在展开行中显示出最新的数据。

我一般通过修改自定义模板（slot）的参数（即下图中的props）来达到这一目的，而不是重新请求数据。

项目代码和上面截图中代码类似。测试时发现添加或删除展开行中数据时，展开行会自动关闭，通过$refs 也无法获取展开行中元素。

解决方法

可以通过给table 元素添加row-key 属性来优化表格的渲染。

<template>
  <el-table :data="tableData" row-key="id" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <p>State: {{ props.row.state }}</p>
      </template>
    </el-table-column>
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
  </el-table>
</template>

<script lang="ts">
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-03',
          name: 'Tom',
          state: 'California'
        },
        {
          id: 2,
          date: '2017-07-01',
          name: 'Bob',
          state: 'California'
        }
      ]
    }
  }
}
</script>