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

本文主要是介绍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 赠送篇:

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

这篇关于vue+element el-select动态加减框数量及验证下拉框选项动态置灰(选中行的下拉框换个值后,原值没办法监控这个问题也解决了)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


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

相关文章

prometheus如何使用pushgateway监控网路丢包

《prometheus如何使用pushgateway监控网路丢包》:本文主要介绍prometheus如何使用pushgateway监控网路丢包问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录监控网路丢包脚本数据图表总结监控网路丢包脚本[root@gtcq-gt-monitor-prome

Spring Boot集成Druid实现数据源管理与监控的详细步骤

《SpringBoot集成Druid实现数据源管理与监控的详细步骤》本文介绍如何在SpringBoot项目中集成Druid数据库连接池,包括环境搭建、Maven依赖配置、SpringBoot配置文件... 目录1. 引言1.1 环境准备1.2 Druid介绍2. 配置Druid连接池3. 查看Druid监控

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》:本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu

如何在Ubuntu 24.04上部署Zabbix 7.0对服务器进行监控

《如何在Ubuntu24.04上部署Zabbix7.0对服务器进行监控》在Ubuntu24.04上部署Zabbix7.0监控阿里云ECS服务器,需配置MariaDB数据库、开放10050/1005... 目录软硬件信息部署步骤步骤 1:安装并配置mariadb步骤 2:安装Zabbix 7.0 Server

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

Spring Security中用户名和密码的验证完整流程

《SpringSecurity中用户名和密码的验证完整流程》本文给大家介绍SpringSecurity中用户名和密码的验证完整流程,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定... 首先创建了一个UsernamePasswordAuthenticationTChina编程oken对象,这是S