当我使用脚本设置时，Vue 3 Element-Plus table 无法显示 axios 结果

Question

我正在使用 vue 3 (setup) + element plus table + axios 来呈现 table data.However，我在 api 结果中得到了数据，但它从来没有显示到 table 视图。

我想使用新的script-setup。

我认为它与 element-plus 无关并且 tableData 在我的代码中没有响应。但我不确定如何在这种情况下声明它。

我的 Vue 文件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="250">
     
    </el-table-column>
    <el-table-column prop="type" label="Type" align="center" width="150">
    </el-table-column>
    <el-table-column prop="description" label="Desc" align="center" width="180">
    </el-table-column>
    <el-table-column prop="income" label="Income" align="center" width="170">
     
    </el-table-column>
    <el-table-column prop="expend" label="Expand" align="center" width="170">
     
    </el-table-column>
    <el-table-column prop="cash" label="Cash" align="center" width="170">
     
    </el-table-column>
    <el-table-column prop="remark" label="Remark" align="center" width="220">
    </el-table-column>
   
  </el-table>
</template>
<script lang="ts" setup>

import { reactive,getCurrentInstance } from "vue";

interface Profile {
  date: string,
  description: string,
  expend: string,
  income: string,
  type: string,
  remark: string
}

const app = getCurrentInstance();

let tableData:Profile[] = reactive([]);

const getAllProfile = () => {
  app.appContext.config.globalProperties.$axios
    .get("/api/profiles")
    .then((res) => {
      tableData= res.data;
      console.log(tableData);//show data successfully in console
    })
    .catch((err) => {
      console.log(err);
    });
};

getAllProfile();
</script>

更新

看来我需要使用一些嵌套结构，例如：

let tableData = reactive({
    arr:[]//store the table data here
})

然后在我需要使用 data.Why 的任何地方使用 tableData.arr 它设计成那样？

正如 xigua2022 所说，我也可以使用 ref 代替，它确实有效。

Answer 1

let tableData = reactive([]); -> 让 tableData = ref([]); 表数据 = res.data; -> tableData.value = res.data;

当我使用脚本设置时，Vue 3 Element-Plus table 无法显示 axios 结果

Vue 3 Element-Plus table could not show axios result when I use script set up

vue.js

vuejs3