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

news2024/10/6 8:23:13

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

在这里插入图片描述

主要是看下拉选择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">
            <i
                class="el-icon-remove-outline remove-button"
                v-if="form.trapolicies.length > 1"
                @click="removePolicy(index)"
            />
            <el-form-item
                label="所属节点"
                :prop="'trapolicies.'+index+'.nodeId'"
                :rules="[{ required: true,message: '请选择所属节点',trigger: 'change',}]"
            >
              <el-select
                  v-model="trapolicy.nodeId"
                  style="margin-left: 20px"
                  placeholder="请选择"
                  @change="change"
              >
                <el-option
                    v-for="(item) in nodes"
                    :key="item['res-id']"
                    :label="item.name"
                    :value="item['res-id']"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item
                label="名称"
                :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-item
                label="描述"
                :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>
                <i
                    class="el-icon-remove-outline remove-btn"
                    v-if="trapolicy.config.length>1"
                    @click="removeConfig(index)"
                />
                <el-form-item
                    label="流分类"
                    :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-option
                        v-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-item
                    label="流动作"
                    :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-option
                        v-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>
                <i
                    class="el-icon-circle-plus-outline add-btn"
                    v-if="trapolicy.config.length===i+1"
                    @click="addConfig(index)"
                />
              </el-col>
            </div>


            <i
                class="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.coloradmin.cn/o/916596.html

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

相关文章

JAVA基础知识四——重载、可变参数

1、方法重载 注意事项&#xff0c;构成重载的必要 1.1、课堂练习——选择题 1.2、课堂练习——程序代码 public class Overload {//编写一个main方法。public static void main(String[] args){Methods method new Methods();/*method.m(10);method.m(10,11);method.m(&quo…

Blazor:Razor组件防止点击穿透

文章目录 微软官方文档如何防止点击传统 微软官方文档 如何防止点击传统 我们就算封装成立Blazor组件&#xff0c;我们还是对原生的DOM元素进行操作 在子组件最外层包一个div。在DIV里面阻止组件事件的传播 <div style"margin-left:10px;" onclick:stopPropaga…

drools8尝试(加单元测试)

drools8的maven模板项目里没有单元测试, 相比而言drools7有个非常好的test senorios 那就自己弄一个 文件是.http后缀的,写了个简单的例子如下 //测试交通违章 POST http://localhost:8080/Traffic Violation accept: application/json Content-Type: application/json{&q…

人工智能AI绘画接入使用文档

人工智能AI绘画接入使用 一、人工智能AI绘画二、使用步骤1、接口2、请求参数3、请求参数示例4、接口 返回示例 三、 AI绘画优秀描述例子四、 如何获取appKey和uid1、申请appKey:2、获取appKey和uid 五、重要说明六、AI绘画成果展示 一、人工智能AI绘画 AI作画,用户可以在平台上…

Python爬虫逆向实战案例(五)——YRX竞赛题第五题

题目&#xff1a;抓取全部5页直播间热度&#xff0c;计算前5名直播间热度的加和 地址&#xff1a;https://match.yuanrenxue.cn/match/5 cookie中m值分析 首先打开开发者工具进行抓包分析&#xff0c;从抓到的包来看&#xff0c;参数传递了查询参数m与f&#xff0c;同时页面中…

【实操干货】如何开始用Qt Widgets编程?(三)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 在本文中&#xff0…

Anaconda Conda实现Python多环境管理

Anaconda Conda实现Python多环境管理 Python多环境AnacondaConda环境管理下载安装镜像配置环境管理常用命令创建Python3.10环境 Python多环境 Python多环境指的是在同一台计算机上同时安装并管理多个不同的Python版本。可以在不同版本的Python之间切换&#xff0c;并确保每个项…

WPS office 最新未公开 0Day漏洞警示

一、事件描述 近日&#xff0c;网传监测发现WPS Office for Windows版本 存在0day漏洞&#xff0c;攻击者可以利用该0day漏洞在受害者主机上执行任意恶意文件&#xff0c;高危级别&#xff0c;官方尚未对此发布修复漏洞&#xff0c;目前建议只能临时弃用wps或者不要点开未知文件…

8月21-22日上课内容 第一章 MySQL数据库初始

本章结构 数据库的基本概念 概述&#xff08;总览&#xff09; 结构&#xff1a; 数据 表 数据库 数据库管理系统 数据库系统原理 数据 (Data) 描述事物的符号记录 包括数字&#xff0c;文字、图形、图像、声音、档案记录等以“记录”形式按统一的格式进行存储表 将不同…

ClickHouse安装及部署

文章目录 Docker快速安装Ubuntu预编译安装包安装检查是否支持SSE4.2使用预编译安装包 Tgz安装包配置文件修改修改密码配置远程访问 其他主机访问文章参考 Docker快速安装 本地pull镜像 docker run -d --name ch-server --ulimit nofile262144:262144 -p 9000:9000 -p 8123:81…

【数据结构与算法】1. 绪论

1. 绪论 1.1 数据结构 1.1.1 数据结构的基本概念 1.1.2 数据结构的三要素 数据结构三要素&#xff1a; 逻辑结构 划分方法一&#xff1a; 线性结构&#xff1a;线性表、栈、队列、串非线性结构&#xff1a;树、图 划分方法二&#xff1a; 集合结构线性结构树形结构网状&…

学Python静不下来,看了一堆资料还是很迷茫是为什么

一、前言 最近发现&#xff0c;身边很多的小伙伴学Python都会遇到一个问题&#xff0c;就是资料也看了很多&#xff0c;也花了很多时间去学习但还是很迷茫&#xff0c;时间长了又发现之前学的知识点很多都忘了&#xff0c;都萌生出了想半路放弃的想法。 让我们看看蚂蚁金服的大…

按钮权限控制

搜索关键字&#xff1a; 自定义指令传参| "自定义指令""dataset"|自定义指令dataset| "Vue""directives"|vue按钮权限实现 1、完整代码&#xff1a; <template> <div> <el-breadcrumb separator-class"el-icon…

CheckBox全选,半选,不选三种样式原生实现

效果图 代码 <!DOCTYPE html> <html> <head><title>复选框样式示例</title><style>input[type"checkbox"] {display: none; /* 隐藏原生复选框 */}label.checkbox {position: relative;display: inline-block;width: 20px;heig…

初出茅庐的小李博客之USB设备开发快速上手

1.USB基础知识介绍 这里有一篇文章写的非常好不再重复造轮子 USB基础知识介绍&#xff1a;https://blog.csdn.net/Richard_Brown/article/details/106602288 2.USB设备介绍 常见的USB设备&#xff1a;U盘、鼠标、MP3、移动硬盘、数码相机、键盘、游戏杆、USB摄像头、USB打印…

MVC OR DDD

MVC OR DDD 说明&#xff1a;这篇是标题党&#xff0c;不包含相关概念说明 前段时间跟随师兄学习了解了DDD领域驱动模型&#xff0c;觉得这个思想更好&#xff0c;进行下面解析和学习方面的思考和实践&#xff0c;觉得很好&#xff0c;耐心读下去。希望对您有所帮助。 首先&am…

流媒体内容分发终极解决方案:当融合CDN与P2P视频交付结合

前言 随着互联网的发展&#xff0c;流媒体视频内容日趋增多&#xff0c;已经成为互联网信息的主要承载方式。相对传统的文字&#xff0c;图片等传统WEB应用&#xff0c;流媒体具有高数据量&#xff0c;高带宽、高访问量和高服务质量要求的特点&#xff0c;而现阶段互联网“尽力…

8个最受欢迎的机器学习部署工具【2023】

我们如何在生产环境中创建和部署经过训练的模型 API 受到机器学习生命周期的许多方面的控制。 MLOps 的概念对于处理复杂的 ML 部署环境非常有益。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 实施可靠的 MLOps 可以为投资机器学习的公司带来巨大收益。 了解要使用和…

Python基础之基础语法(一)

Python基础之基础语法 我们安装完Python环境后&#xff0c;就可以开始Python的学习了。 Python解释器 解释器说明CPython官方&#xff0c;C语言开发&#xff0c;最广泛的Python解释器IPython一个交互式&#xff0c;功能增强的CPythonPyPyPython语言写的Python解释器&#xf…

打造顶尖微服务项目!解锁四种持久化工具的酸爽奇迹!

前言 看到标题是不是以为我要教你微服务的什么绝技了&#xff1f; 很遗憾&#xff0c;我只是想给你们分享一下我目前经手的一个SpringCloudAlibaba微服务项目带来的酸爽体验。 今天&#xff0c;我姑且把持久层的酸爽感受同诸位交流一二&#xff0c;让诸位知晓编程领域之浩瀚广阔…