vue+element el-select动态加减框数量及验证下拉框选项动态置灰(选中行的下拉框换个值后,原值没办法监控这个问题也解决了)

1效果:

2部分主要(HTML):

         1:这个位置主要就是看看方法什么的吧,还有大概的结构

         2:@change="sort_Change(item,tablelists.orderbyList)这两个参数(都有大用):

                        (1)item:代表每次你操作的这个数据

                        (2)tablelists.orderbyList:代表你这一共有几行数据(上边这个例子就会得到一个数组包4个对象)

<el-form-item prop="name" label=""><el-row><el-col :span="20" style="display:flex"><el-select v-model="item.name" class="borputsel" style="width:19%" @change="sort_Change(item,tablelists.orderbyList)">   <!-- 这个位置就是看看方法什么的吧 --><el-optionv-for="fieldNameListitem in fieldNameLists":key="fieldNameListitem.name":label="fieldNameListitem.name":value="fieldNameListitem.name":disabled="fieldNameListitem.disabled"></el-option></el-select><el-select v-model="item.value" class="sort_class" style="width:100%"><el-optionv-for="item in sort_radio":key="item.value":label="item.name":value="item.value"></el-option></el-select></el-col><el-col :span="3"><el-buttonv-if="index === 0"type="text"icon="el-icon-document-add"class="icon"@click="addNum_sort(tablelists.orderbyList)"></el-button>  <!-- 这是添加的按钮 --><el-buttontype="text"icon="el-icon-delete"class="icon"@click="delNum_sort(tablelists.orderbyList, index)"></el-button>  <!-- 这是删除的按钮 --></el-col></el-row></el-form-item>

3方法:

        3-1: 下拉框的change方法:(这个好难,写了一天才把逻辑捋顺,那家伙各种尝试呀,最终还是选择了最笨的办法,不过也是最好理解的,注释也都有仔细看看就理解了)

 sort_Change(item,itemList) {var itemList_copy = []itemList.forEach(item=>{itemList_copy.push(item.name)          //定义空数组后把所有选中的(值的name)放到这里边 , 每次进来都是从新循环进去所以每次都只有 选中的几项  为了解决同样条数换select值的问题})if (item.name) {item.value = 'ASC'                  //设 "排序" 默认值用的 (前边选了 对应的后边默认填一个)this.fieldNameLists.forEach((items, index) => {if (itemList_copy.includes(items.name)) {      //循环下拉框数组  把选中行的值添加disabled置灰(下次不可再选,避免出现重复)items.disabled = true}else{delete items.disabled                         //没选中的 或换下来的选项 disabled 解除}})} else {item.value = ''         //刚打开的时候什么都没选  不用设默认值}},

        3-2 添加删除方法:(之所以放一起是因为,添加很简单就一行,删除复杂点但也不难)

 // 新增addNum_sort(item) {item.push({ name: '', value: '' })},// 删除delNum_sort(item, index) {this.fieldNameLists.forEach(items => {if (items.name === item[index].name) { delete items.disabled } //把删除的这一条  在 下拉框中 disabled 解除})if (index === 0 && item.length === 1) {     item.splice(index, 1, { name: '', value: '' })     //如果只有一条的时候  只把值清空  不把 本条框框删除} else {item.splice(index, 1)            //正常的页面删除}},

这次的东西可不是  直接搬过去就能用了,需要理解着搬    (不过注释还是标的挺明白的 ,仔细看看吧,别着急)

4 赠送篇:

初始的数据结构大概长这样(因为这个页面正常一打开,最少也得有一行吧而且数据是空的,要不怎么++出第二第三行呀)

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LCD电子广告牌课程设计

概述 1.1课程设计简介 亮丽实用的广告牌可以给我们的生活添加光彩、可以给店铺招揽生意。传统的广告牌都是固定的汉字&#xff0c;并且时间长了会掉色&#xff0c;使汉字模糊难认&#xff0c;这就给我的生活带来很多的不便。尤其到了晚上传统广告牌就会失去其该有的作用。所以在…

2024年安全现状报告

2024 年安全现状报告有些矛盾。尽管安全专业人员的道路困难重重&#xff0c;比如说严格的合规要求、不断升级的地缘政治紧张局势和更复杂的威胁环境&#xff0c;但整个行业还是在取得进展。 许多组织表示&#xff0c;与前几年相比&#xff0c;网络安全变得更容易管理。组织之间…

AI赋能银行国际结算审单:合合信息抽取技术的实践与应用

官.网地址&#xff1a;合合TextIn - 合合信息旗下OCR云服务产品 时下&#xff0c;银行国际业务是金融体系的重要组成部分&#xff0c;涵盖了外汇交易、国际结算、贸易融资、跨境投资等领域&#xff0c;这些业务对于国际贸易和全球经济发展具有重要作用。国际业务部门单据、凭证…

OpenGL系列(五)纹理贴图

概述 OpenGL纹理是一种在三维图形中应用纹理映射的技术。纹理是一张图像&#xff0c;可以应用到三维模型的表面上&#xff0c;从而使得模型看起来更加真实和具有细节。通过纹理映射&#xff0c;可以将图像的像素值与三维模型的顶点进行匹配&#xff0c;从而为模型的表面增加细节…

验证码识别接口、多种样式验证码识别接口、中英文验证码识别接口

验证码识别接口、多种样式验证码识别接口、中英文验证码识别接口 本文提供一个基于OCR和机器学习的验证码识别接口&#xff0c;能够识别较复杂的中文、英文验证码&#xff0c;在OCR的基础上针对验证码进行算法优化。本接口是收费的&#xff08;最低0.5分1次调用&#xff0c;试…

23种设计模式之代理模式

代理模式 1、概念 代理模式&#xff1a;给某一个对象提供一个代理或占位符&#xff0c;并由代理对象来控制对原对象的访问 代理模式是常用的结构型设计模式之一&#xff0c;在Java RMI、Web Service、Spring AOP等技术和框架中都使用了代理模式 2、代理模式结构 Subject&a…

解析 Spring 框架中的三种 BeanName 生成策略

在 Spring 框架中&#xff0c;定义 Bean 时不一定需要指定名称&#xff0c;Spring 会智能生成默认名称。本文将介绍 Spring 的三种 BeanName 生成器&#xff0c;包括在 XML 配置、Java 注解和组件扫描中使用的情况&#xff0c;并解释它们如何自动创建和管理 Bean 名称。 1. Be…

Nodejs 第七十七章(MQ高级)

MQ介绍和基本使用在75章介绍过了&#xff0c;不再重复 MQ高级用法-延时消息 什么是延时消息? Producer 将消息发送到 MQ 服务端&#xff0c;但并不期望这条消息立马投递&#xff0c;而是延迟一定时间后才投递到 Consumer 进行消费&#xff0c;该消息即延时消息 插件安装 R…

业务安全蓝军测评标准解读—业务安全体系化

目录 1.前言 2.业务蓝军测评标准 2.1 业务安全脆弱性评分(ISVS) 2.2 ISVS评分的参考意义 2.3 纵向对比 2.4 横向对比 3.业务蓝军测评案例 3.1 APP虚假安装案例 3.1.1 定义测评对象和攻击目标 3.1.2 制定攻击方案 3.1.3 执行攻击并评估 3.2 人脸识别绕过案例 3.2.…

STM32硬件接口I2C应用(基于MP6050)

目录 概述 1 STM32Cube控制配置I2C 1.1 I2C参数配置 1.2 使用STM32Cube产生工程 2 HAL库函数介绍 2.1 初始化函数 2.2 写数据函数 2.3 读数据函数 3 认识MP6050 3.1 MP6050功能介绍 3.2 加速计测量寄存器 ​编辑3.3 温度计量寄存器 3.4 陀螺仪测量寄存器 4 MP60…

微信小程序组件传值

虽然微信小程序是比较轻量的&#xff0c;但是还是拥有组件的 这是文件的基本目录 我们的代码基本都在pages和components文件夹中 在component中创建组件 在component中 &#xff0c;创建一个目录 我创建了一个 head目录 用于配置头部信息 我在这里创建了 一个头部组件&…

linux-计划任务

作用&#xff1a;定时自动完成特定的工作 计划任务的分类 一次性的计划任务&#xff1a;例如下周三对文档的重要文件备份一次 周期性的计划任务&#xff1a;每天12:00创建一个文件 命令 一次性的任务计划 at batch 周期性计划任务 crontab anacron 一次性计划任务 …

Github 2024-06-12 C开源项目日报 Top10

根据Github Trendings的统计,今日(2024-06-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量C项目10PHP项目1PLpgSQL项目1C++项目1Ventoy: 100%开源的可启动USB解决方案 创建周期:1534 天开发语言:C协议类型:GNU General Public Licen…

品牌与产品:消费者决策的经济逻辑与品牌宣传的战略意义

在当今日益全球化的经济环境中&#xff0c;品牌与产品之间的关系对于企业的成功与否起着至关重要的作用。然而&#xff0c;在消费者做出购买决策时&#xff0c;他们到底是在选择产品本身&#xff0c;还是在选择附着在产品之上的品牌价值&#xff1f;同样&#xff0c;当客户选择…

载波相移CPS-SPWM调制方法的simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 载波相移CPS-SPWM调制方法的simulink建模与仿真&#xff0c;载波相移PWM方法&#xff1a; 2.系统仿真结果 单极倍频 釆用 调制波 反相 法 &#xff0c; 基本调制原理为 &…

【总线】设计fpga系统时,为什么要使用总线?

目录 为什么用总线 为什么选择AMBA 总结 系列文章 【总线】AMBA总线架构的发展历程-CSDN博客 【总线】设计fpga系统时&#xff0c;为什么要使用总线&#xff1f;-CSDN博客 为什么用总线 在FPGA系统设计中&#xff0c;使用总线是为了实现组件间的高效互联与通信&#xff0c…

惠州惠城:可燃气体报警器定期校准检测,安全更放心

在惠州惠城这片繁华的土地上&#xff0c;工业发展日新月异&#xff0c;安全问题愈发受到重视。其中&#xff0c;可燃气体报警器作为预防火灾和爆炸事故的重要设备&#xff0c;正在越来越多的场所得到应用。 今天&#xff0c;佰德就来探讨一下可燃气体报警器在惠州惠城的重要性…

3.2 窗口滚动条

本节讲述窗口滚动条的简单使用方法。如果窗口客户区的内容太多&#xff0c;为了方便浏览窗口客户区的所有内容&#xff0c;就需要在创建窗口时添加窗口垂直或水平滚动条样式。窗口过程处理WM_CREATE消息时初始化滚动条的位置和滚动范围。窗口过程处理WM_VSCROLL或WM_HSCROLL消息…

idea自定义注释模板

1、打开配置 setting -> Editor -> Live Template 2、添加TemplateGroup&#xff0c;并在添加的TemplateGroup下加LiveTemplate 3、配置Live Template 内容&#xff1a; **** Description: * $param$* return $return$ * author $user$* date $date$ $time$**/变量…

LLM微调方法(Efficient-Tuning)六大主流方法:思路讲解优缺点对比[P-tuning、Lora、Prefix tuning等]

LLM微调方法(Efficient-Tuning)六大主流方法&#xff1a;思路讲解&优缺点对比[P-tuning、Lora、Prefix tuning等] 由于LLM参数量都是在亿级以上&#xff0c;少则数十亿&#xff0c;多则数千亿。当我们想在用特定领域的数据微调模型时&#xff0c;如果想要full-tuning所有模…