问题重现

---

这里我已经通过二级分类 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;  
        });
    })
}

最终效果