渭南市建设工程招投标信息网,清远seo,[wordpress,找人做网站价格Vue3 Element-Plus 使用 Table 插槽时数据未及时更新 问题重现解决方法最终效果 问题重现 这里我已经通过二级分类 id 查询到一级分类和二级分类#xff0c;但是使用插槽和 v-for 渲染出来还是之前的分类 id#xff0c;但是一点击表格或者保存代码他又能正常刷新出来。 … Vue3 Element-Plus 使用 Table 插槽时数据未及时更新 问题重现解决方法最终效果 问题重现 这里我已经通过二级分类 id 查询到一级分类和二级分类但是使用插槽和 v-for 渲染出来还是之前的分类 id但是一点击表格或者保存代码他又能正常刷新出来。 templateel-table :heighttableHeight :datatableList border stripeel-table-column propgoodsDesc label商品简介 aligncenter/el-table-columnel-table-column propcategoryId label分类 aligncentertemplate #defaultscope styledisplay: flex;el-tag stylemargin-left: 10px; typesuccess effectdark v-for(item, index) in scope.row.categoryId :keyindex{{ item }}/el-tag/template/el-table-column/el-table
/templatescript setup langts
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; });})
}最终效果
