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

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

<script setup lang="ts">
// 错在这里,这里用reactive其实没有给tableData加上`响应监测`,监听不到tableData的变化
let tableData: Array<any> = reactive([])
const getUserInfo = () => {
  $http.get(`/api/users`, {}).then((res: any) => {
    //请求成功
    tableData = res.list
  });
};
onMounted(() => {
  getUserInfo()
})
</script>
<template>
  <div>
    <el-table ref="table1" :data="tableData">
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="createdAt" label="创建时间" width="280"/>
    </el-table>
  </div>
</template>

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

<script setup lang="ts">
// 这里给要监听的数据多套一层,就能监听到内部数据的变化
let tableData = reactive({
  data: []
})
const getUserInfo = () => {
  $http.get(`/api/users`, {}).then((res: any) => {
    //请求成功
    tableData.data = res.list
  });
};
onMounted(() => {
  getUserInfo()
})
</script>
<template>
  <div>
    /*这里用tableData.data就能获取到监听之后的数据了*/
    <el-table ref="table1" :data="tableData.data">
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="createdAt" label="创建时间" width="280"/>
    </el-table>
  </div>
</template>

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