当前位置: 首页 > news >正文

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

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;  });})
}

最终效果

在这里插入图片描述

相关文章:

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

Vue3 Element-Plus 使用 Table 插槽时数据未及时更新 问题重现解决方法最终效果 问题重现 这里我已经通过二级分类 id 查询到一级分类和二级分类&#xff0c;但是使用插槽和 v-for 渲染出来还是之前的分类 id&#xff0c;但是一点击表格或者保存代码他又能正常刷新出来。 <…...

vue 2 怎么把2024-04-13T17:42:19转换成短日期格式

我们在日常开发过程中&#xff0c;通常会将日期格式在entity中设置成LocalDateTime。这样就有一个麻烦&#xff0c;我们在前端展示这个日期的时候就会变成2024-04-13T17:42:19。这显然不是我们所要的效果&#xff0c;所以我们今天来解决这个问题&#xff0c;让前端展示正确的日…...

网络IO模型以及实际应用

网络IO模型 本文主要介绍了几种不同的网络IO模型&#xff0c;以及实际应用中使用到的Reactor模型等。 我们常说的网络IO模型&#xff0c;主要包含阻塞IO、非阻塞IO、多路复用IO、信号驱动IO、异步IO。 根据第一个阶段&#xff1a;是否需要阻塞&#xff0c;分为阻塞和非阻塞IO。…...

一文详解MES、ERP、SCM、WMS、APS、SCADA、PLM、QMS、CRM、EAM及其关系

经常遇到很多系统&#xff0c;比如&#xff1a;MES、ERP、SCM、WMS、APS、SCADA、PLM、QMS、CRM、EAM&#xff0c;这些都是什么系统&#xff1f;有什么功能和作用&#xff1f;它们之间的关系是怎样的&#xff1f; 今天就一文详细分享给大家。 10大系统之间的关系 ERP 和其他…...

《Kubernetes部署篇:基于Kylin V10+ARM架构CPU使用containerd部署K8S 1.26.15集群(一主多从)》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:企业级K8s集群运维实战 1、在当前实验环境中安装K8S1.25.14版本,出现了一个问题,就是在pod中访问百度网站,大概时间有10s多,这个时间太长了,尝试了各种办法,都解决不了,后面尝试安装了了1.26.…...

maven命令

mvn archetype:generate 创建 Maven 项目 mvn compile 编译源代码 mvn deploy 发布项目 mvn test-compile 编译测试源代码 mvn test 运行应用程序中的单元测试 mvn site 生成项目相关信息的网站 mvn clean 清除项目目录中的生成结果 mvn package 根据项目生成的 jar mvn instal…...

jetson系列开发板使用虚拟机烧录系统时,遇见无法识别开发板的情况

在双系统中的ubuntu系统烧录没问题&#xff0c;但是电脑Ubuntu系统由于版本低&#xff0c;所以没有网络&#xff0c;烧录起来还的连网线&#xff0c;所以问了开发板的工程师&#xff0c;所幸&#xff0c;解决了问题&#xff0c;很感谢工程师的指导&#xff0c;特此记录一下&…...

【数据结构】树与二叉树、树与森林部分习题以及算法设计例题 2

目录 【数据结构】树与二叉树、树与森林部分习题以及算法设计例题一、交换二叉树每个结点的左右孩子Swap 函数&#xff08;先序遍历&#xff09;&#xff1a;Swap 函数&#xff08;中序遍历&#xff09; 不可行&#xff1a;Swap 函数&#xff08;后序遍历&#xff09;&#xff…...

Cesium之home键开关及相机位置设置

显隐控制 设置代码中的homeButton var TDT_IMG_C "https://{s}.tianditu.gov.cn/img_c/wmts?servicewmts&requestGetTile&version1.0.0" "&LAYERimg&tileMatrixSetc&TileMatrix{TileMatrix}&TileRow{TileRow}&TileCol{TileCol}…...

FreeRTOS_day1

1.总结keil5下载代码和编译代码需要注意的事项 下载代码前要对仿真进行设置 勾选后代码会立刻执行 勾选后会导致代码不能执行 写代码的时候要写在对应的begin和end之间&#xff0c;否则会被覆盖 2.总结STM32Cubemx的使用方法和需要注意的事项 ①打开软件&#xff0c;新建工程…...

Nginx日志格式化和追踪

背景 Nginx是一款功能强大的Web服务器&#xff0c;对于网络环境中的日志记录和配置至关重要。定制化Nginx日志格式可以帮助管理员更好地监控服务器性能、分析用户行为并做出相应优化。在本文中&#xff0c;我们将深入探讨Nginx日志格式的高级定制化策略&#xff0c;包括理解基…...

华为交换机配置telnet SSH登录步骤

这次项目中的交换机是华为 S5735-L24T4X 需要配置telnet和 SSH登录 在平时项目中发现&#xff0c;华为不同型号&#xff0c;不同版本的配置命令也是不同&#xff0c;&#xff08;这不是脑子有问题吗&#xff1f; 干啥搞成不一样的&#xff09; 本次型号&#xff1a;S5735-L2…...

市面上加密混淆软件的比较和推荐

引言 市面上有许多加密混淆软件可供开发者使用&#xff0c;但哪些软件是最好用的&#xff1f;哪些软件受到开发者的喜爱&#xff1f;本文将根据一次在CSDN上的投票结果&#xff0c;为大家介绍几款在程序员中普及度较高的加密软件。以下是投票结果&#xff0c;希望能对大家的选择…...

最新AI创作系统ChatGPT网站源码AI绘画,GPTs,AI换脸支持,GPT联网提问、DALL-E3文生图

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧。已支持GPT…...

电视盒子哪个好?2024口碑网络电视盒子排行榜

多年来电视盒子始终占据重要地位&#xff0c;功能上并没有受到影响。在这么多品牌中哪些电视盒子的评价是最好的呢&#xff1f;小编根据各大电商平台的用户评价情况整理了口碑最好的网络电视盒子排行榜&#xff0c;跟着小编一起看看市面上的电视盒子哪个好吧。 TOP 1&#xff1…...

CookieSession

目录 什么是会话 一.Cookie 1.Cookie介绍 2.Cookie的作用 3.Cookie的基本使用 4.Cookie生命周期 5.Cookie有效路径 6.注意事项 二.Session 1.Session基本原理 2 Session的作用 3.Session的基本使用 4.Session底层实现机制 5.Session生命周期 什么是会话 Cookie和S…...

Nginx服务 重写功能与反向代理

六、重写功能 rewrite Nginx服务器利用 ngx_http_rewrite_module 模块解析和处理rewrite请求&#xff0c;此功能依靠 PCRE(perl compatible regular expression)&#xff0c;因此编译之前要安装PCRE库&#xff0c;rewrite是nginx服务器的重要功能之一&#xff0c;用于实现URL的…...

Midjourney教程(完整版)-看这篇就够了

Midjourney使用指南 - 订阅计划费用比较 Midjourney 具有三个订阅版本。按月或全年支付可享受 20% 的折扣。每个订阅计划都包括访问 Midjourney 图库、官方 Discord、一般商业使用条款等。 如何订阅 使用该/subscribe命令生成指向订阅页面的个人链接。 或者&#xff0c;转到Mi…...

服务器上部署GPU版的milvus向量数据库

1、安装docker compose 我们可以从 Github 上下载它的二进制包来使用&#xff0c;最新发行的版本地址&#xff1a; https://github.com/docker/compose/releases sudo curl -L "https://github.com/docker/compose/releases/download/v2.6.0/docker-compose-$(uname -s)…...

【配置】Docker安装可道云网盘

环境 一台云服务器&#xff0c;centos8&#xff0c;必须安装docker Docker安装 1、卸载旧版 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine2、需要的安装包 yum ins…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

土建施工员考试:建筑施工技术重点知识有哪些?

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

针对药品仓库的效期管理问题,如何利用WMS系统“破局”

案例&#xff1a; 某医药分销企业&#xff0c;主要经营各类药品的批发与零售。由于药品的特殊性&#xff0c;效期管理至关重要&#xff0c;但该企业一直面临效期问题的困扰。在未使用WMS系统之前&#xff0c;其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...