解决 Vue3+ElementPlus 使用table 展开行type=“expand“ 时，遇到行展开后又自动关闭的问题

在Vue3和Element Plus中使用table时遇到展开行（type="expand"）后又自动关闭的问题，可能是因为数据更新导致的状态丢失。为了解决这个问题，请确保你正确地使用了v-if或v-show来控制展开行的显示，并保证每个行项的一个唯一的key。

以下是一个简化的例子，展示如何在Vue3和Element Plus中正确使用展开行：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 其他列 -->
 
    <el-table-column type="expand">
      <template #default="{ row }">
        <!-- 这里放置展开后要显示的内容 -->
        <p>{{ row.description }}</p>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    id: 1,
    name: 'Item 1',
    description: 'Description 1',
    // 其他数据
  },
  // ...更多数据
]);
</script>

确保tableData中的每个对象都有一个唯一的id属性，这样Element Plus就可以追踪每一行的展开状态。如果你的数据是异步加载的，确保在数据更新后，使用Vue的响应式系统来更新数据，这样展开的状态就不会丢失。