vue中v-for重复数据处理||element下拉框去除重复

news2025/2/22 3:10:18

前端去重方法有多种,只说三种常用的(新老方法都有)
1-使用常规双for循环(暴力算法)遍历比较的方式对值进行比较
2-使用js方法sort排序(只针对数组),但是经常在vue等新框架中提示TypeError: arr.sort is not a function
3-使用reduce方法(>_<)推荐

前端js各种操作合集备忘

业务场景

点击路线后后面车道框只显示当前路线的车道数选项,Excel导入测试数据,发现有重复的,而且后期路上的数据导进来会导致下拉框很长!所以在不影响业务场景的要求下选择去重展示!
在这里插入图片描述

常规去重

在这里插入图片描述

使用reduce

这里同时使用了三元运算符,看不懂自行百度

在这里插入图片描述

代码

HTML || vue中的template

			<el-select v-model="queryParams.cdNum" placeholder="车道数" clearable>
                    <el-option
                        v-for="lx in lxcdNum"
                        :key="lx.lxId+lx.beginZh"
                        :label="lx.cdNum"
                        :value="lx.cdNum"
                    />
                </el-select>

js

(response => {
                // todo 关于前端    去重  新老方法的使用
                var arr = [];
                var laneArr = []
                var hash = [];
                /* 删除下拉框中的重复项 */
                // for(let i = 0; i < response.rows.length; i++){
                //     arr = response.rows[i].cdNum;

                    arr = response.rows
                    laneArr = arr.reduce(function (item,next){
                    hash[next.cdNum] ? '' : hash[next.cdNum] = item.push(next);
                    return item;
                }, []);
                //         for(let j = i + 1; j < response.rows.length; j++){
                //             if(response.rows[i].cdNum == response.rows[j].cdNum){
                //                 j = ++i;
                //             }
                //         }
                //     if (arr[i] != arr[i-1]){
                //         laneArr = arr.push(arr[i])
                //     }
                // }
                    this.lxcdNum = laneArr

            })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/700131.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

传统后端漏洞----(Web Server) 解析漏洞

笔记 前言IIS解析漏洞文件夹解析漏洞原理限制条件 ";" 分号截断漏洞原理 IIS解析漏洞检测IIS 文件夹解析漏洞检测IIS 分号截断漏洞检测 防御手段 Nginx解析漏洞Nginx 文件类型错误解析漏洞导致任意PHP代码执行原理Nginx 空字节解析漏洞导致任意文件可解析&#xff08…

DB2:DB2TOP解析

文章目录 简介主界面功能介绍快捷设置数据库监控(d)表空间监控(Tablespace)&#xff08;t&#xff09;动态SQL监控(Dynamic SQL)(D)表监控&#xff08;T&#xff09;会话监控(session)(l)缓冲池监控(Bufferpool)(b)锁监控(Locks)(U)瓶颈监控(Bottleneck)(B)load监控(Utilities)…

FastDFS单机部署及SpringBoot整合

前言 FastDFS是一个开源的高性能分布式文件系统。它的主要功能包括&#xff1a;文件存储、文件同步和文件访问&#xff08;文件上传和文件下载&#xff09;&#xff0c;可以解决高容量和负载平衡问题。FastDFS应满足其服务基于文件的网站的要求&#xff0c;如照片共享网站和视…

数据安全服务,美创科技为“数字国贸” 筑牢安全防线

在数字经济蓬勃发展的当下&#xff0c;国有企业作为国民经济的“中流砥柱”&#xff0c;正以主力军和先行者之姿&#xff0c;以数字化转型创新作为引擎&#xff0c;驱动高质量发展。数字化进程持续深入&#xff0c;伴随数据要素多样流动&#xff0c;降低数据安全风险&#xff0…

UART I2C SPI CAN LIN 和ETH这些通讯外设的内在联系

这些不同的通讯手段之间其实有着许多隐藏的共性。 物理层到数据链路层扒一扒这些通讯手段的底层原理。 物理层与数据链路层这两个概念&#xff1a; ISO国际标准化组织在上世纪70年代末&#xff0c; 把计算机网络通信的整个框架描述成了一个七层的模型&#xff0c;并称之为OS…

数据备份技术------概述与总结

数据备份技术------概述与总结 数据备份技术------概述与总结备份技术的发展&#xff08;组网方式&#xff09;1、Host备份方式2、LAN备份方式3、LAN-free备份方式&#xff08;SAN&#xff09;4、Server-free备份方式5、Sever-less备份方式 备份技术的发展&#xff08;主流备份…

Springboot搭配Redis实现接口限流

目录 介绍 限流的思路 代码示例 必需pom依赖 自定义注解 redis工具类 redis配置类 主拦截器 注册拦截器 介绍 限流的需求出现在许多常见的场景中&#xff1a; 秒杀活动&#xff0c;有人使用软件恶意刷单抢货&#xff0c;需要限流防止机器参与活动 某 api 被各式各样…

人工智能系统的技术架构

一、架构图 1.基础层包括&#xff1a; 硬件设施、软件设施、数据资源。其中在硬件设施方面&#xff0c;做深度学习和神经网络训练时候往往会涉及到模型训练是在CPU还是GPU上面&#xff0c;在这个里面GPU就是做计算加速的&#xff0c;第二个是智能芯片&#xff0c;市面上出现的…

linux 系统 最详细 启动流程

文章目录 详细分析 系统启动过程主要流程阶段说明BIOSMBR(Stage 1 bootloader)GROUB(Stage 2 bootloader)kernelvmlinuzinitrd.img Init 详细分析 系统启动过程 主要流程 PC 启动主要流程&#xff0c;分为四个阶段&#xff1a; BIOS -> MBR -> GRUB -> KERNEL ->…

6.3.5 修改文件时间或创建新文件: touch

我们在 ls 这个指令的介绍时&#xff0c;有稍微提到每个文件在linux下面都会记录许多的时间参数&#xff0c; 其实是有三个主要的变动时间&#xff0c;那么三个时间的意义是什么呢&#xff1f; modification time &#xff08;mtime&#xff09;&#xff1a; 当该文件的“内容…

1.6、JAVA 分支结构 switch结构 for循环

1 分支结构 1.1 概述 顺序结构的程序虽然能解决计算、输出等问题 但不能做判断再选择。对于要先做判断再选择的问题就要使用分支结构 1.2 形式 1.3.1 练习&#xff1a;商品打折案例 创建包: cn.tedu.basic 创建类: TestDiscount.java 需求: 接收用户输入的原价。满1000打9折…

消息通知模块的设计原理

目录 介绍 一、数据库设计 公告消息记录应该全局唯一&#xff0c;还是为每个用户创建一条公告消息&#xff1f; 用MongoDB存储消息数据 1. 搞冷热数据分离&#xff0c;热数据定期归档 2. 冷数据存储一段时间后就销毁&#xff0c;释放存储空间 二、系统消息的发送与收…

肺癌的成因

中国医师协会 2023 年呼吸医师年会暨第二十二届中国呼吸医师论坛&#xff08;CACP 2023&#xff09;于 2023 年 6 月 15-18 日在大连如期举行。肺癌是我国目前发病率和死亡率最高的癌症&#xff0c;它的早期筛查和诊断十分关键。 丁香园呼吸时间特邀四川大学华西医院院长、呼吸…

软件测试报告办理解决方案分享,为什么要选择CMA认证或CNAS认可测试报告?

在进行软件测试时&#xff0c;合格的测试报告对于软件产品的质量保障至关重要。那么软件测试报告又该如何办理呢?软件企业为什么要选择CMA认证或CNAS认可的测试报告呢?因为CMA认证的测试报告和CNAS认可的测试报告都具有不可忽视的好处。 一、软件测试报告办理解决方案 1. 测…

我蒙了面试官一上来就说:请你介绍一下你测试过的项目

测试人员在找工作中&#xff0c;基本都会碰到让介绍项目的这种面试题&#xff0c;如何正确介绍自己的项目&#xff1f;需要做哪些技术准备&#xff1f; 今天这篇文章&#xff0c;围绕这些问题&#xff0c;跟大家一起聊一聊。 关于介绍自己的项目&#xff1f; 可以从以下几个方面…

赛效:如何将PDF文件分割成单页的PDF文档

1&#xff1a;打开wdashi点击PDF处理菜单里的“PDF分割”。 2&#xff1a;将本地PDF文件添加上去&#xff0c;在下方选择转换页码&#xff0c;在这里我们选择转换每一页。 3&#xff1a;点击右下角“开始转换”。 4&#xff1a;转换好后&#xff0c;点击绿色下载按钮将分割好的…

七、Docker安装MySQL/Tomcat/Redis等

学习参考&#xff1a;尚硅谷Docker实战教程、Docker官网、其他优秀博客(参考过的在文章最后列出) 目录 前言一、安装步骤二、Docker安装Tomcat2.1 搜索镜像2.2 拉取镜像2.3 查看镜像2.4 启动镜像&#xff08;端口映射&#xff09;2.5 停止容器2.6 移除容器 三、Docker安装MySQL…

23年下半年软考软件测评师难考吗?最近考虑要不要考?

软考中级难度是适中的&#xff0c;可以考啊&#xff01; 因为当代随着各种应用技术层出不穷&#xff0c;随着社会发展&#xff0c;需要大量的软件人才支持&#xff0c;同时软件的更新速度越来越快&#xff0c;市场竞争极其激烈。相关国际认证有微软的&#xff0c;Orical&#…

新西兰访问学者签证申请注意事项

新西兰是一个美丽而富有文化多样性的国家&#xff0c;许多学者都梦想着前往这里进行学术交流和研究。如果你计划申请新西兰的访问学者签证&#xff0c;以下是知识人网小编整理的一些你需要注意的事项&#xff1a; 1. 确认申请资格&#xff1a;在开始申请之前&#xff0c;确保你…

旧手机不要轻易扔掉,将其设置为无线网卡,不消耗流量

如果你有一部旧手机正在闲置着&#xff0c;或者正考虑要将其丢弃&#xff0c;那么请暂停一下。因为这个旧手机可以成为你的无线网卡&#xff0c;帮助你在家中或出行时实现更快的网络下载速度&#xff0c;而且毫不费流量。接下来&#xff0c;我将告诉你如何将旧手机变成无线网卡…