element-ui使用动态渲染下拉选择框el-select已经选择的下拉框的值不可以重复选择让其disabled

news2024/11/16 21:38:52

在这里插入图片描述
调接口拿到下拉框数据的数据的时候将其disabled全为true
但是如果编辑的时候就需要与详情接口对比,如果有id一致就将disabled为true

if (res.code == 0) {
           if (this.dialogtitle == "新增合同") {
              res.data.map((v) => {
                v.nameUnitVoList.forEach((item) => {
                  item.disabled = false;
                });
              });
            } else {
              this.tabsOptions.map((v) => {
                v.editableTabs.map((t) => {
                  t.tableProductData.map((n) => {
                    res.data.map((m) => {
                      m.nameUnitVoList.forEach((item) => {
                        if(item.enterpriseProduceId == n.enterpriseProduceId)
                        item.disabled = true;
                      });
                    });
                  });
                });
              });
            }
       }

在下拉框的change事件与删除事件中抽离一个方法

1.如果是flag是del且有name,说明这一行被删除,将当前的name在this.types去掉
否则就是下拉框change,然后将name追加到this.types

2.如果是编辑有的值已经被选择了此时前面接口已处理disabled为true,所以判断如果disabled为true也将name追加到this.types

3.下拉框change改变值的时候,拿到change改变值的之前的值,将其name从this.types筛选掉

4.再将下拉框下拉数据与this.types比较,如果里面name能找到就将其下拉数据disabled 置为true

    nameChange(e, row) {
      this.getChoiceArr(row);
     }
    del(index, row) {
      this.getChoiceArr(row,'del')
      this.tableProductData.splice(index, 1);
      this.$emit("sentdelTableInfo", {});
    }, 
    //抽离一个方法
   getChoiceArr(row,flag) {
      this.types = []
      //preValue === 拿到产品名称下拉框变更之前的值
      const preValue = this.$refs[row.enterpriseProduceId].value
      if (flag == 'del' &&  row.name) {
        //如果是删除就让当前的name在this.types去掉
        this.types = this.types.filter(v=>(v != row.name))
      }else{
        this.types.push(row.name);
      }
      row.options.optionProSize.forEach((t) => {
        //编辑的时候需要将之前选择的disabled是true也要追加进去this.types
        if(t.disabled){
          this.types.push(t.name);
        }
        //console.log(this.types, "types");//|| t.disabled
        //当我们变更值的时候需要将上一个值变成可选的值,筛选掉
        this.types = this.types.filter(v=>(v != preValue))
        if (this.types.indexOf(t.name) !== -1) {
          t.disabled = true;
        } else {
          t.disabled = false;
        }
      });
    },  

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

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

相关文章

九耶:产品经理面试题 ——请说说工作中你主导的产品上线后你会关注哪些数据指标?

【面试官考察的点】 实际的产品工作中需要通过数据驱动业务:产品经理了解用户对不同功能的使用情况,行为特征和使用反馈,这样可以为产品的改进提供很好的方向。面试官想考察你是否具备数据分析的意识和能力。 【满分回答】 在产品上线后&am…

百度开发者平台API地理编码,根据地址获取经纬度

地理编码 | 百度地图API SDK (baidu.com) 原始csv # encoding:utf-8 import requests import csv import json # 接口地址 url "https://api.map.baidu.com/geocoding/v3"# 此处填写你在控制台-应用管理-创建应用后获取的AK ak "XXXXXXX"# 创建CSV文件并…

vue 实现拖拽效果

实现方式:使用自定义指令可以实现多个面板拖拽互不影响 1.自定义指令 js directives: {// 拖拽drag(el) {el.onmousedown function (e) {let x e.pageX - el.offsetLeftlet y e.pageY - el.offsetTopdocument.onmousemove function (e) {el.style.left e.pag…

掌握Python的X篇_12_如何使用VS Code调试Python程序

本篇将会介绍如何使用VS Code调试Python程序。 文章目录 1. 什么是调试2. 断点3. 如何启动调试4. 监视窗口5. 单步 1. 什么是调试 我们可以利用VS Code对Python代码进行调试。所谓调试,大家可以理解成有能力将程序进行 “慢动作播放”让我们有机会看到程序一步一步…

一文2500字详解如何使用mock.js实现接口测试的自动化

这篇文章主要为大家介绍了如何使用mock.js实现接口测试的自动化详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪 Mock.js 基础用法介绍 Mock.js是一个常用于生成随机数据和拦截Ajax请求的JavaScr…

linux基础学习

1.day1 1、修改虚拟机的网络; sudo vim /etc/netplan/*.yaml sudo netplan apply 2.day2 1、VIM配置; 2、安装SSH,调用putty接入终端; 3、shell命令; *:匹配任意长度的字符 ?:匹…

关于前端框架vue2升级为vue3的相关说明

一些框架需要升级 当前(202306) Vue 的最新稳定版本是 v3.3.4。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有: 前提条件:已安装 16.0 或更高版本的Node.js(摘) 必须的变更:核…

CAN总线开发必看! 如何使用CANlib检测CAN帧溢出情况? Kvaser三招帮你轻松解决

从1980年代,Kvaser就开始CAN产品的研发,在相关产品开发领域有近40多年的经验,对CAN和相关总线技术有着非常深入的研究。广州智维电子科技是KVASER的中国引进者,我们会不定期分享一些有趣的发现和特定情况的技术处理。 在开发严重…

美国过境签证申请也要面签吗?

随着人们出国旅行的增加,美国过境签证成为了一个热门话题。对于许多人来说,了解美国过境签证的流程和要求非常重要。在这篇文章中,知识人网小编将介绍美国过境签证是否需要面签,以及相关的注意事项。 首先,让我们来了解…

Redis7学习笔记01

一、redis7实战教程简洁 1、大纲: ①、适合对象,从小白到熟手,一套全包圆 ②、Redis专题-大厂面试题,含100道 ③、Redis专题-真实需求生产真实案例 ④、Redis7新特性 2、小白篇高阶篇: 3、大厂面试题&#xff1a…

web场景-静态资源规则与定制化

一、SpringBoot默认静态资源路径 1.1 静态资源放在类路径下: /static/public/resources/META-INF/resources 1.2 浏览器访问: 当前项目根路径/ 静态资源名 eg:如上图,要想访问这四张图片,访问路径依次为:localhos…

1400*C. Computer Game

Example input 6 15 5 3 2 15 5 4 3 15 5 2 1 15 5 5 1 16 7 5 2 20 5 7 3 output 4 -1 5 2 0 1 解析: k个电, 第一种为 k>a 时,只玩游戏 k-a; 第二种,k>b,一边玩一边充电 k-b 问完成n轮游戏的情况下,优先第…

被逼无奈在小公司熬了2年,现在我终于进了腾讯测试岗...

其实两年前校招的时候就往腾讯投了一次简历,结果很明显凉了,随后这个理想就被暂时放下了,但是这个种子一直埋在心里,想着总有一天会再次挑战的。 其实这两年除了工作以外,其余时间基本上都在学习,打磨自己…

基于OpenCV solvePnP函数估计头部姿势

人脸识别 文章目录 人脸识别一、姿势估计概述1、概述2、姿态估计3、在数学上表示相机运动4、姿势估计需要什么5、姿势估计算法6、Levenberg-Marquardt 优化 二、solvePnP函数1、函数原型2、参数详解 三、OpenCV源码1、源码路径 四、效果图像示例参考链接 一、姿势估计概述 1、…

vue中通过JavaScript实现web端鼠标横向滑动触控板滑动效果-demo

JavaScript实现web端鼠标横向滑动&触控板滑动效果 支持鼠标拖动滑动&触控板滑动效果 web端实现滑动&#xff0c;就是对鼠标按下、鼠标松开、鼠标移动事件进行监听 效果图 代码 结构代码 <template><div class"swiper"><div class"co…

财报解读:谷歌成功绝地反击?厮杀尚未真正开始!

在经历了一轮激烈的攻防战之后&#xff0c;谷歌、微软同一天发布了财报&#xff0c;从数据来看&#xff0c;谷歌成功抵御了微软携OpenAI发起的挑战&#xff0c;业绩表现全面超预期&#xff0c;而微软的业绩虽然整体也超预期&#xff0c;但相比其四面出击的高调则黯淡了许多。 巨…

GoogleLeNet V2 V3 —— Batch Normalization

文章目录 Batch Normalizationinternal covariate shift激活层的作用BN执行的位置数据白化网络中的BN层训练过程 BN的实验效果MNIST与GoogleLeNet V1比较 GoogleLeNet出来之后&#xff0c;Google在这个基础上又演进了几个版本&#xff0c;一般来说是说有4个版本&#xff0c;之前…

12-1_Qt 5.9 C++开发指南_自定义插件和库-自定义Widget组件(提升法(promotion)创建自定义定制化组件)

当UI设计器提供的界面组件不满足实际设计需求时&#xff0c;可以从 QWidget 继承自定义界面组件。 有两种方法使用自定义界面组件&#xff1a; 一种是提升法(promotion)&#xff0c;例如在8.3 节将一个QGraphicsView组件提升为自定义的 QWGraphicsView 类&#xff0c;提升法用…

python将UTC +8 时间 转换为 UTC 时间

因为在工作的时候&#xff0c;有时候经常使用 UTC 时间&#xff0c;因为北京时间是 UTC 8&#xff0c;有时候要自己换算一下&#xff0c;或者 时间戳转换的时候有问题&#xff0c;所以就写了这个。 import time from datetime import datetime import pytz# 输入时间字符串 # …

LLM当前状态和潜在影响;谷歌Brain2Music读取大脑活动生成音乐

&#x1f989; AI新闻 &#x1f680; 谷歌Brain2Music利用AI读取大脑活动生成音乐 摘要&#xff1a;谷歌发布了名为Brain2Music的论文&#xff0c;通过人工智能和脑部成像技术生成个性化音乐。他们招募了5名志愿者&#xff0c;记录他们在听不同音乐类型时的大脑活动数据。通过…