vue3+element-plus 表格数据不更新问题

用vue3+element-plus做项目,明明后台给的数据已经能够在控制台console出来了,但是表格还是不刷新。 当代码改变热更新之后表格数据会出来，但是一刷新浏览器就又没了，后来终于解决了。 这是我原来的数据显示不出来时候的代码:

1<script setup lang="ts">
2// 错在这里,这里用reactive其实没有给tableData加上`响应监测`,监听不到tableData的变化
3let tableData: Array<any> = reactive([])
4const getUserInfo = () => {
5  $http.get(`/api/users`, {}).then((res: any) => {
6    //请求成功
7    tableData = res.list
8  });
9};
10onMounted(() => {
11  getUserInfo()
12})
13</script>
14<template>
15  <div>
16    <el-table ref="table1" :data="tableData">
17      <el-table-column prop="name" label="姓名" width="180"/>
18      <el-table-column prop="age" label="年龄"/>
19      <el-table-column prop="createdAt" label="创建时间" width="280"/>
20    </el-table>
21  </div>
22</template>

下面是修改之后的代码,可以显示出表格数据了:

1<script setup lang="ts">
2// 这里给要监听的数据多套一层,就能监听到内部数据的变化
3let tableData = reactive({
4  data: []
5})
6const getUserInfo = () => {
7  $http.get(`/api/users`, {}).then((res: any) => {
8    //请求成功
9    tableData.data = res.list
10  });
11};
12onMounted(() => {
13  getUserInfo()
14})
15</script>
16<template>
17  <div>
18    /*这里用tableData.data就能获取到监听之后的数据了*/
19    <el-table ref="table1" :data="tableData.data">
20      <el-table-column prop="name" label="姓名" width="180"/>
21      <el-table-column prop="age" label="年龄"/>
22      <el-table-column prop="createdAt" label="创建时间" width="280"/>
23    </el-table>
24  </div>
25</template>

附上原作者解决的链接: https://blog.csdn.net/weixin_45755816/article/details/124202414