vue组件el-table :data数据更新视图不自动更新 解决办法

记录错误-VUE-Element：

使用Element的el-table组件更改数据后不自动渲染界面

---

原因：

Element默认代码中的收据对象不是响应式的对象

ps：可能这个问题比较简单没有在网上第一时间找到答案，再此记录希望给大家提供帮助

上代码

模板来自Element的自定义表头代码

<template>
<!-- 按钮添加数据 -->
<el-button type="primary" plain @click="addInfo">添加</el-button>
<!-- 表单数据 -->
    <el-table :data="tableDatas" style="width: 100%">
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
    <el-table-column label="RQurl" prop="RQurl" />
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { reactive,computed, ref } from 'vue'
<!-- 这是文档原来的数据 -->
interface User {
  date: string
  name: string
  address: string
}
const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
<!-- 我们需要的 -->
const tableDatas = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'John',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
<!-- 数据更新 -->
const addInfo = () => {
<!-- 对tableData进行操作不会实时渲染-->
  tableDatas.push({
    date: '2024-05-22',
    name: '张三',
    address: 'No. 189, Grove St, Los Angeles',
  },)
}
</script>

---