Vue3 + Element-Plus 使用 Table 插槽时数据未及时更新

问题重现

这里我已经通过二级分类 id 查询到一级分类和二级分类，但是使用插槽和 v-for 渲染出来还是之前的分类 id，但是一点击表格或者保存代码他又能正常刷新出来。

<template><el-table :height="tableHeight" :data="tableList" border stripe><el-table-column prop="goodsDesc" label="商品简介" align="center"></el-table-column><el-table-column prop="categoryId" label="分类" align="center"><template #default="scope" style="display: flex;"><el-tag style="margin-left: 10px;" type="success" effect="dark" v-for="(item, index) in scope.row.categoryId" :key="index">{{ item }}</el-tag></template></el-table-column></el-table>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
// 表格数据
const tableList = ref([]);
// 列表查询
const getList = async () => {let res = await getGoodsListApi(searchParm, "0");if (res && res.code == 200) {// 获取出图片和视频列表res.data.records.forEach((goods: any) => {// 分割 image 属性，得到图片和视频链接数组// 通过二级分类标签获取整个分类类别let res = getGoodsTypeBySonIdApi(goods.categoryId);res.then((value) => {goods.categoryId = value.data;});const imageArray = goods.image.split(',');// 判断每个链接的类型并添加对应的属性imageArray.forEach((url: String) => {if (url.endsWith('.png') || url.endsWith('.jpg') || url.endsWith('.jpeg')) {// 图片链接if (!goods.images) {goods.images = [];}goods.images.push(url);} else if (url.endsWith('.mp4') || url.endsWith('.avi') || url.endsWith('.mov')) {// 视频链接if (!goods.videos) {goods.videos = [];}goods.videos.push(url);}});// 删除原始的 image 属性delete goods.image;});tableList.value = res.data.records;searchParm.total = res.data.total;}
}
onMounted(() => {tableHeight.value = window.innerHeight - 200;getList();
})

处理后的数据示例

[{"goodsId": 3,"userId": 7,"orderId": null,"categoryId": ["数码","电脑"],"type": "0","goodsName": null,"goodsDesc": "这是二条测试数据","goodsOldPrice": 200,"goodsNewPrice": 100,"isNew": null,"tradingType": "邮寄","findType": "QQ","findValue": "13036497562","wxNum": 0,"status": "1","sellStatus": null,"createTime": "2024-04-14","sellTime": null,"address": "北京市东城区东华门街道锡拉胡同北京利生体育商厦, 39.916405, 116.410243","deleteStatus": "0","userById": 0,"images": [],"videos": []},{"goodsId": 1,"userId": 7,"orderId": null,"categoryId": ["数码","电脑"],"type": "0","goodsName": null,"goodsDesc": "这是一条测试数据","goodsOldPrice": 200,"goodsNewPrice": 100,"isNew": null,"tradingType": "面交","findType": "手机号","findValue": "13036497562","wxNum": 0,"status": "1","sellStatus": null,"createTime": "2024-04-14","sellTime": null,"address": "北京市东城区东华门街道锡拉胡同北京利生体育商厦, 39.916405, 116.410243","deleteStatus": null,"userById": 0,"images": [],"videos": []}
]

解决方法

通过二级分类标签获取整个分类类别
不与
获取出图片和视频列表操作
同时进行

// 列表查询
const getList = async () => {let res = await getGoodsListApi(searchParm, "0");if (res && res.code == 200) {// 获取出图片和视频列表res.data.records.forEach((goods: any) => {// 分割 image 属性，得到图片和视频链接数组const imageArray = goods.image.split(',');// 判断每个链接的类型并添加对应的属性imageArray.forEach((url: String) => {if (url.endsWith('.png') || url.endsWith('.jpg') || url.endsWith('.jpeg')) {// 图片链接if (!goods.images) {goods.images = [];}goods.images.push(url);} else if (url.endsWith('.mp4') || url.endsWith('.avi') || url.endsWith('.mov')) {// 视频链接if (!goods.videos) {goods.videos = [];}goods.videos.push(url);}});// 删除原始的 image 属性delete goods.image;});tableList.value = res.data.records;searchParm.total = res.data.total;getAllType();}
}// 通过二级分类标签获取整个分类类别
const getAllType = () => {tableList.value.forEach((goods: any) => {// 通过二级分类标签获取整个分类类别let res = getGoodsTypeBySonIdApi(goods.categoryId);res.then((value) => {goods.categoryId = value.data;  });})
}

最终效果