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

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

在这里插入图片描述

主要是看下拉选择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)
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud学习笔记(六)_Ribbon服务调用

Ribbon介绍 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端负载均衡的工具 Ribbon是Netflix发布的开源项目&#xff0c;主要功能是提供客户端的软件负载均衡算法和服务调用。Ribbon客户端组件提供一系列完善的配置项如连接超时、重试等。简单的说&#xff0c;就是…

神通数据库v7.0试用版安装步骤

网上找了下神通数据库的安装教程&#xff0c;发现都已经过时&#xff0c;或者安装受阻&#xff0c;于是直接从官网下载后尝试亲自安装了一遍适用版&#xff0c;在CentOS7(64bit)环境具体操作步骤如下&#xff1a; 1、安装 wget工具 yum install -y wget 2、安装rar解压工具 …

ssm学生公寓管理中心系统源码和论文

ssm学生公寓管理中心系统源码和论文057 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;…

Nexus 如何配置 Python 的私有仓库

Nexus 可作为一个代理来使用。 针对一些网络环境不好的公司&#xff0c;可以通过配置 Nexus 来作为远程的代理。 Group 概念 Nexus 有一个 Group 的概念&#xff0c;我们可以认为一个 Nexus 仓库的 Group 就是很多不同的仓库的集合。 从下面的配置中我们可以看到&#xff0…

用户端Web自动化测试_L3

目录&#xff1a; 浏览器复用Cookie 复用pageobject设计模式异常自动截图测试用例流程设计电子商务产品实战 1.浏览器复用 复用浏览器简介 为什么要学习复用浏览器&#xff1f; 自动化测试过程中&#xff0c;存在人为介入场景提高调试UI自动化测试脚本效率 复用已有浏览…

测试框架pytest教程(3)夹具-@pytest.fixture

内置fixture Fixture使用pytest.fixture装饰&#xff0c;pytest有一些内置的fixture 命令可以查看内置fixture pytest --fixtures fixture范围 在pytest中&#xff0c;夹具&#xff08;fixtures&#xff09;具有不同的作用范围&#xff08;scope&#xff09;&#xff0c;用于…

JAVA毕业设计095—基于Java+Springboot+Vue的酒店管理系统(源码+数据库)

基于JavaSpringbootVue的酒店管理系统(源码数据库)095 一、系统介绍 本系统前后端分离(网页端和app端都有) 本系统分为管理员、酒店管理员、酒店员工、用户四种角色(角色菜单可自行分配) 用户功能&#xff1a; 注册、登录、酒店搜索、酒店列表、酒店预订、我的收藏、我的订…

ACM模式(基础输入输出)

import java.lang.*; import java.util.*; public class Main{public static void main(String[] args){Scanner in new Scanner(System.in);while(in.hasNextInt()){//下一行是否有数据int ain.nextInt();int bin.nextInt();System.out.println(ab);}} }Java方法间的调用 http…

上海交大ACM班总教头团队重磅新作,带你动手学机器学习(文末赠书4本)

目录 0 写在前面1 什么是机器学习&#xff1f;2 ACM 班总教头&#xff1a;俞勇3 动手学习机器学习赠书活动 0 写在前面 机器学习强基计划聚焦深度和广度&#xff0c;加深对机器学习模型的理解与应用。“深”在详细推导算法模型背后的数学原理&#xff1b;“广”在分析多个机器…

git merge规则

参考文档&#xff1a;https://juejin.cn/post/7129333439299321887 丹尼尔&#xff1a;Hi&#xff0c;蛋兄&#xff0c;周杰伦都出新专辑了&#xff0c;你咋还不更新啊&#xff0c;真的打算半年一更啊&#xff1f; 蛋先生&#xff1a;好像确实是这样&#xff0c;要不&#xff0…

微信小程序的springboot实现 个人行程日程安排系统

本站后台采用Java的springboot框架进行后台管理开发&#xff0c;可以在浏览器上登录进行后台数据方面的管理&#xff0c;MySQL作为本地数据库&#xff0c;微信小程序用到了微信开发者工具&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特…

我是大运火炬手丨民营企业家极米钟波:大运精神激励企业不断创新、追求极致

7月26日&#xff0c;成都第31届世界大学生夏季运动会火炬传递成都站第五传递日活动&#xff0c;在成都3所高校以及东安湖体育公园继续进行。极米科技股份有限公司&#xff08;以下简称“极米科技”&#xff09;董事长钟波是第92棒火炬手。 火炬手钟波 大学求学在成都&#xff…

《知识图谱与大模型融合实践研究报告》发布,创邻科技参编

近期&#xff0c;第三届知识图谱产业发展论坛暨知识图谱与大模型融合研讨会在北京召开。会上&#xff0c;《知识图谱与大模型融合实践研究报告》正式发布&#xff01; 该白皮书是由中国电子技术标准化研究院依托知识图谱产业推进方阵、全国信标委人工智能分委会知识图谱工作组…

TCP可靠性机制

确认号/序列号/ACK TCP帮助确保数据的准确传递。为了做到这一点&#xff0c;其使用了一些特殊的标记和信息&#xff0c;其中包括序号、确认号和ACK字段。 其中&#xff0c;它将每个字节的数据都进行了编号. 即为序列号. 序列号&#xff1a;就像给书中的每一页都编了号码一样&a…

Redis三种持久化方式详解

一、Redis持久性 Redis如何将数据写入磁盘 持久性是指将数据写入持久存储&#xff0c;如固态磁盘&#xff08;SSD&#xff09;。Redis提供了一系列持久性选项。其中包括&#xff1a; RDB&#xff08;快照&#xff09;&#xff1a;RDB持久性以指定的时间间隔执行数据集的时间点…

vue 简单实验 v-if 条件判定

1.代码 <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <div id"conditional-rendering"><span v-if"seen">现在你看到我了</span> </div> <script> const C…

语法篇--XML数据传输格式

一、XML概述 1.1简介 XML&#xff0c;全称为Extensible Markup Language&#xff0c;即可扩展标记语言&#xff0c;是一种用于存储和传输数据的文本格式。它是由W3C&#xff08;万维网联盟&#xff09;推荐的标准&#xff0c;广泛应用于各种系统中&#xff0c;如Web服务、数据…

回归预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现SA-ELM模拟退火算法优化极限学习机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本…

Java“牵手”虾皮商品详情数据,根据商品ID获取虾皮(Shopee商品详情数据接口,虾皮API接口申请指南

虾皮&#xff08;shopee&#xff09;商城是一个跨境网上批发购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取虾皮商品详情数据&#xff0c;您可以通过开放平台的接口或者直接访问虾皮商城的网页来获取商品详情信息。以下…