【点击新增一个下拉框 与前一个内容一样 但不能选同一个值】

点击新增一个下拉框 与前一个内容一样 但不能选同一个值

在这里插入图片描述

主要是看下拉选择el-option的disabled,注意不要混淆

<el-form label-width="120px" :model="form" ref="form" style="color: #fff"><template v-for="(trapolicy, index) in form.trapolicies"><el-row><el-col :span="16" :offset="4" style="padding-top:20px"><iclass="el-icon-remove-outline remove-button"v-if="form.trapolicies.length > 1"@click="removePolicy(index)"/><el-form-itemlabel="所属节点":prop="'trapolicies.'+index+'.nodeId'":rules="[{ required: true,message: '请选择所属节点',trigger: 'change',}]"><el-selectv-model="trapolicy.nodeId"style="margin-left: 20px"placeholder="请选择"@change="change"><el-optionv-for="(item) in nodes":key="item['res-id']":label="item.name":value="item['res-id']"></el-option></el-select></el-form-item><el-form-itemlabel="名称":prop="'trapolicies.'+index+'.policyName'":rules="[{required:true,message:'请输入名称'},{validator:checkData,trigger:'blur'}]"><el-input style="margin-left: 20px; width: 265px" v-model="trapolicy.policyName"/></el-form-item><el-form-itemlabel="描述":prop="'trapolicies.'+index+'.description'":rules="[{validator:checkData,trigger:'change'}]"><el-input style="margin-left: 20px; width: 265px"  maxlength="127" show-word-limit v-model="trapolicy.description"/></el-form-item><div v-for="(cfg,i) in trapolicy.config"><el-col :span="20" :offset="2"><el-divider/></el-col><el-col :span="11" :offset="6" style="position: relative"><span class="rule-index">流分类-流动作 {{ i + 1 }}</span><iclass="el-icon-remove-outline remove-btn"v-if="trapolicy.config.length>1"@click="removeConfig(index)"/><el-form-itemlabel="流分类":prop="'trapolicies.'+index+'.config.'+i+'.classifyName'":rules="[{required:true,message:'请选择流分类',trigger:'blur'}]"><el-select v-model="cfg.classifyName" placeholder="请选择" style="width: 100%" no-data-text="请先创建流分类"><el-optionv-for="(item, index) in classifies":key="index":label="item.classifyName":value="item.classifyName":disabled="trapolicy.config.some(c=>c.classifyName===item.classifyName && c.classifyName!==cfg.classifyName)"/></el-select></el-form-item><el-form-itemlabel="流动作":prop="'trapolicies.'+index+'.config.'+i+'.behaviorName'":rules="[{required:true,message:'请选择流动作',trigger:'blur'}]"><el-select v-model="cfg.behaviorName" placeholder="请选择" style="width: 100%" no-data-text="请先创建流动作"><el-optionv-for="(item, index) in beahaviors":key="index":label="item.behaviorName":value="item.behaviorName":disabled="trapolicy.config.some(c=>c.behaviorName===item.behaviorName && c.behaviorName!==cfg.behaviorName)"/></el-select></el-form-item><iclass="el-icon-circle-plus-outline add-btn"v-if="trapolicy.config.length===i+1"@click="addConfig(index)"/></el-col></div><iclass="el-icon-circle-plus-outline add-button"v-if="form.trapolicies.length === index + 1"@click="addPolicy()"/></el-col></el-row><el-row><el-col :span="20" :offset="2"><el-divider/></el-col></el-row></template></el-form>

methods:

// 获取流分类、流动作async change(value) {this.classifies = await getTrafficClassifierById(value)this.beahaviors = await getTrafficBehaviorById(value)},// 表单新增配置框addPolicy() {this.form.trapolicies.push({// "policyId": "1",policyName: '',description: '',nodeId: '',nodeName: '',config: [{classifyId: '',classifyName: '',behaviorId: '',behaviorName: '',},],})},addConfig(i) {this.form.trapolicies[i].config.push({classifyId: '',classifyName: '',behaviorId: '',behaviorName: '',})},// 表单移除配置框removePolicy(index) {this.form.trapolicies.splice(index, 1)},removeConfig(i) {this.form.trapolicies[i].config.splice(i, 1)},

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

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

相关文章

史上最全软件测试入门到精通【测试+测开】

测试学习大纲梳理 根据本人过往学习经验与理解&#xff0c;整理了一些关于测试学习内容与顺序&#xff0c;涵盖了基本软件测试工程师需要掌握的所有技能&#xff0c;希望可以给想了解的小伙伴们一些指引与帮助&#xff0c;有错误或需求的欢迎留言指出~ 一、web开发者模式 这…

如何做好作品集?告诉你这7个技巧

又到了一年一度的求职季&#xff0c;无论你是毕业生、专业人士还是自由职业者&#xff0c;一个高质量的个人作品集都是你的第一块垫脚石。作品集的制作是你工作能力的缩影&#xff0c;也是面试官认识你的第一站。制作一个作品集需要展示你的广度、技能和经验&#xff0c;甚至是…

Java学数据结构(1)——抽象数据类型ADT 表List、栈Stack和队列Qeue

目录 引出抽象数据类型&#xff08;abstract data type,ADT&#xff09;表ListArrayList,Vector, LinkedListArrayList手动实现与分析Vector的分析&#xff08;线程安全&#xff09;LinkedList 的手动实现与分析 栈stack—后进先出java中stack源码分析栈的应用&#xff1a;检查…

使用 Feature Flags 与可观测工具实现数据库灰度迁移

场景描述 很多企业会遇到数据库升级、或数据库迁移的情况&#xff0c;尤其是在自建数据库服务向云数据库服务、自建机房向云机房、旧数据库向新数据库迁移等场景。 然而&#xff0c;我们需要在整个移植过程中保证其稳定性、避免数据遗失、服务宕机等情况&#xff0c;最常见的移…

数据结构 | 堆

本文简要总结堆的概念。 更新&#xff1a;2023 / 8 / 20 数据结构 | 堆 堆概念方法插入步骤 删除步骤 示例大根堆堆插入删除堆排序 代码实现Python大根堆1.2. heapq 小根堆1.2. heapq 参考链接 堆 概念 如果谈到堆排序&#xff0c;那么必然要说说什么是 大根堆 max heap 和 …

百度23Q2财报最新发布:营收利润加速增长,AI+生态战略渐显规模

百度集团-SW(9888.HK)Q2财报已于2023/08/22(美东)盘前发布&#xff0c;二季度百度集团整体收入实现341亿元&#xff0c;同比增长15%;归属百度的净利润(non-GAAP)达到80亿元&#xff0c;同比增长44%。营收和利润双双实现大幅增长&#xff0c;超市场预期。其中&#xff0c;百度核…

基于乌燕鸥算法优化的BP神经网络(预测应用) - 附代码

基于乌燕鸥算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于乌燕鸥算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.乌燕鸥优化BP神经网络2.1 BP神经网络参数设置2.2 乌燕鸥算法应用 4.测试结果&#xff1a;5.Matlab代…

课程项目设计--项目建立--宿舍管理系统--springboot后端

前要 项目设计–宿舍管理系统 文章目录 项目建立导入依赖配置文件配置目录结构config配置mybatis-plusswagger 生成实体、mapper和servicebaseEntity统一响应实例响应码接口响应码接口实现统一响应result统一分页响应 项目建立 太长了&#xff0c;修改一下 导入依赖 暂时先加…

深入浅出理解相机标定原理

重要说明&#xff1a;本文从网上资料整理而来&#xff0c;仅记录博主学习相关知识点的过程&#xff0c;侵删。 一、参考资料 微信公众号&#xff1a;计算机视觉life 专栏&#xff1a;#相机标定 Camera Calibration 张正友标定法-完整学习笔记-从原理到实战 二、相机标定相…

文件内容搜索工具 - Python实现

在本篇文章中&#xff0c;我们将介绍如何使用 wxPython 库创建一个简单的文件搜索工具。这个工具允许用户选择一个文件夹&#xff0c;并在该文件夹中的所有 .py 文件中查找指定的文字&#xff0c;并显示匹配的位置。 C:\pythoncode\blog\searchwordinpyfile.py 代码实现 我们首…

Android 场景Scene的使用

Scene 翻译过来是场景&#xff0c;开发者提供起始布局和结束布局&#xff0c;就可以实现布局之间的过渡动画。 具体可参考 使用过渡为布局变化添加动画效果 大白话&#xff0c;在 Activity 的各个页面之间切换&#xff0c;会带有过渡动画。 打个比方&#xff0c;使用起来类似…

点亮社交新篇章:探索 WeTalk 新增的头像与群聊功能

目录 引言&#xff1a; 引入头像功能&#xff1a; 头像功能的优势&#xff1a; 引入群聊功能&#xff1a; 群聊功能的优势&#xff1a; 引入头像功能&#xff1a; 查看头像&#xff1a; ​编辑 上传头像&#xff1a; 引入群聊功能&#xff1a; 创建群聊&#xff1a…

八月更新 | CI 构建计划触发机制升级、制品扫描 SBOM 分析功能上线!

点击链接了解详情 这个八月&#xff0c;腾讯云 CODING DevOps 对持续集成、制品管理、项目协同、平台权限等多个产品模块进行了升级改进&#xff0c;为用户提供更灵活便捷的使用体验。以下是 CODING 新功能速递&#xff0c;快来看看是否有您期待已久的功能特性&#xff1a; 01…

RabbitMq-3入门案例

rabbitmq入门 1.生产者&#xff08;服务提供方&#xff09; //依赖<dependencies> <!-- rabbitmq客户端依赖--><dependency><groupId>com.rabbitmq</groupId><artifactId>amqp-client</artifactId><version>5.8.0<…

什么是链表,前端如何理解链表

一、什么是链表 多个元素存储的列表链表中的元素在内存中不是顺序存储的&#xff0c;而是通过“next”指针联系在一起的。 JS中的原型链 原理就是 链表结构 链表结构 {key: "A",next: {key: "B",next: {key: "C",next: null}} } //原型链 //对…

数电票红利悄然而至 百望云数据驱引“供应链协同”新纪元

2023年&#xff0c;全面数字化的电子发票政策正如飞驰的列车在各地试点推广中加速前行&#xff0c;“以数治税”的全新时代即将来临&#xff0c;基于数电票赋能的企业数字化红利正在悄然释放。借着政策快速落地的东风&#xff0c;财税数字化也进入到全面建设的新周期&#xff0…

微服务流程引擎:简单又灵活,实现流程全生命周期管理!

伴随着日益激烈的市场竞争&#xff0c;传统的办公操作已经无法满足发展需要了。如果采用微服务流程引擎加油助力&#xff0c;就可以帮助企业更好地管理数据资源&#xff0c;高效做好各种表单制作&#xff0c;实现高效率办公。流辰信息以市场为导向&#xff0c;用心钻研低代码技…

C++设计模式(工厂方法模式)

文章目录 前言一、工厂方法模式介绍二、工厂方法模式和简单工厂模式对比三、工厂方法模式适用场景四、工厂方法模式示例代码总结 前言 本篇文章来带大家学习C中的工厂方法模式。 一、工厂方法模式介绍 工厂方法模式是一种创建型设计模式&#xff0c;用于通过工厂方法创建对象…

C++ string 类

文章目录 引用头文件初始化赋值1. 空串2. 拷贝复制3. 直接初始化赋值4. 单个字符初始化 遍历 string 类1. 下标索引遍历2. 迭代器遍历3. 使用 range for 循环遍历字符串&#xff08;需要 C11 或更新的版本&#xff09; string 常用方法判断字符串是否为空串获取字符串中字符个数…

数据中台容易失败的20多种原因全部在这里了

数据中台失败的原因总结 在当今数字化转型的浪潮中&#xff0c;数据中台作为关键的战略举措被越来越多的企业所关注和实施。然而&#xff0c;数据中台项目的实施过程中并不乏失败案例&#xff0c;这引业界对于数据中台失败原因的深入思考和分析。通过一些公开的信息和数据&…