Vue 循环el-select 并且不能重复选择相同数据

news2024/12/23 5:17:45

根据已选择的属性 , 禁用相同属性的选项 ,如果重复则不能再选择

<template>
  <div class="container">
    <h3>需求:一共4台车 每人只能选择不一样的车 选过的不能再选</h3>
    <div
      v-for="(item, index) in person.model.selectList"
      :key="index"
      class="selectItem"
    >
      <div class="name">
        <span>姓名:</span>
        <el-select size="small" v-model="item.name" placeholder="请选择">
          <el-option
            v-for="e in person.optionsName"
            :value="e.value"
            :key="e.value"
            :label="e.label"
          >
          </el-option>
        </el-select>
      </div>
      <div class="car">
        <span>车:</span>
        <el-select
          size="small"
          v-model="item.car"
          placeholder="请选择"
          @change="chageValue"
        >
          <el-option
            v-for="e in person.optionsCar"
            :value="e.value"
            :key="e.value"
            :label="e.label"
            :disabled="e.disabled"
          >
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const person = reactive({
  model: {
    selectList: [
      { name: "", car: "" },
      { name: "", car: "" },
      { name: "", car: "" },
      { name: "", car: "" },
    ],
  },
  optionsName: [
    {
      value: "1",
      label: "张三",
    },
    {
      value: "2",
      label: "李四",
    },
    {
      value: "4",
      label: "王五",
    },
    {
      value: "5",
      label: "李六",
    },
  ],
  optionsCar: [
    {
      value: "6",
      label: "玛莎",
      disabled: false,
    },
    {
      value: "7",
      label: "保时捷",
      disabled: false,
    },
    {
      value: "8",
      label: "法拉利",
      disabled: false,
    },
    {
      value: "9",
      label: "劳斯莱斯",
      disabled: false,
    },
  ],
});
function chageValue() {
  console.log(person.model.selectList);
  person.optionsCar.forEach((v) => {
    v.disabled = false;
    person.model.selectList.forEach((i) => {
      if (i.car == v.value) {
        v.disabled = true;
      }
    });
  });
}
</script>

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

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

相关文章

NFT合约部署

部署合约&#xff1a; 1.web3 NFT合约部署工具 https://remix.ethereum.org/ 2.tron NFT合约部署工具 https://www.tronide.io/ 3.部署 web3 ERC721代码&#xff1a; // SPDX-License-Identifier: MIT pragma solidity ^0.8.2;import "openzeppelin/contracts/token/ERC7…

利用三次样条插值调整鱼眼扭曲程度

本文利用三次样条插值算法&#xff0c;改变鱼眼扭曲程度。效果如下图所示&#xff1a; 源码下载地址&#xff1a;利用三次样条插值算法更改鱼眼特效的扭曲程度资源-CSDN文库 &#xff08;说明&#xff1a;源码基于QT和opencv &#xff09; 主要代码 鱼眼扭曲 void fisheye(…

动态翻页的电子画册制作,原来这么简单!

大家平时有没有见过那种动态翻页效果的电子画册&#xff1f;它要比传统纸质版的画册要时尚且富有质感多了。因为它不仅外观精致&#xff0c;还带有背景音乐、有清脆的翻书声&#xff0c;以及可以插入视频、动画等特效&#xff0c;这么丰富且有趣的动态电子画册谁不喜欢看呢&…

easyscholar配置秘钥连接Zotero-style,更方便的了解文献!

如果你不知道什么是easyScholar,以及怎么安装easyScholar? 请参见文章 easyScholar 一、easyscholar配置秘钥 1.首先打开easyscholar插件&#xff0c;并登录 2.点击自定义数据集 3.依次点击 用户信息-开放接口 4.点击刷新 5.在Zoter中 编辑-首选项-高级-编辑器 6.点击…

文件夹重命名:解决文件夹名称难题,批量将中文翻译成英文

在日常生活和工作中&#xff0c;我们经常需要处理各种各样的文件和文件夹。然而&#xff0c;有时候我们会遇到文件夹名称混乱或者无法识别的问题&#xff0c;这给我们的文件管理和查找带来了很大的不便。为了解决这些问题&#xff0c;我们可以使用文件夹批量重命名技巧&#xf…

Direct3D粒子系统

粒子和点精灵 粒子(是种微小的物体,在数学上通常用点来表示其模型。所以显示粒子时,使用点图元(由 D3 DPRIMITIVETYPE类型的D3 DPT POINTLIST枚举常量表示)是一个很好的选择。但是光栅化时,点图元将被映射为一个单个像素。这样就无法为我们提供很大的灵活性,因为实际应用…

t2017递推3骨牌

答案&#xff1a; #include<iostream> using namespace std; long long n,s[10009]; int main() {cin>>n;s[1]1,s[2]2,s[3]4;if(n1){cout<<1;return 0;}if(n2){cout<<2;return 0;}if(n3){cout<<4;return 0;}for(int i4;i<n;i)s[i]s[i-1]s[i…

某卢小说网站登录密码逆向

js逆向&#xff0c;今晚找了一个小说网站&#xff0c;分析一下登录密码的解密逆向过程&#xff0c;过程不是很难&#xff0c;分享下 学习网站aHR0cHM6Ly91LmZhbG9vLmNvbS9yZWdpc3QvbG9naW4uYXNweA 这个就是加密后的密码&#xff0c;今晚就逆向它&#xff0c;其他参数暂时不研究…

每日一练:使用Python计算从m到n的累加和

设计思路 可以定义一个函数来计算从m到n的整数累加和&#xff0c;这个函数会接受两个参数&#xff1a;m和n&#xff0c;然后通过使用for循环和range函数&#xff0c;遍历从m到n&#xff08;包括n&#xff09;的所有整数&#xff0c;并将它们加起来。 代码实现 def sum_of_nu…

如何使用Docker搭建Drupal内容管理系统并远程访问

🎬 鸽芷咕:个人主页 🔥个人专栏:《Linux深造日志》《C++干货基地》⛺️生活的理想,就是为了理想的生活! 文章目录前言1. Docker安装Drupal2. 本地局域网访问3 . Linux 安装cpolar4. 配置Drupal公网访问地址5. 公网远程访问Drupal6. 固定Drupal 公网地址📝全篇总结 前言…

linux 操作系统

先讲一下叭&#xff0c;自己学这的原因&#xff0c;是因为我在做项目的时候使用到啦Redis&#xff0c;其实在windows系统上我其实也装啦Redis上&#xff0c;但是我觉得后期在做其他的项目的时候可能也会用到这个然后就想着要不先学学redis&#xff0c;然后在后面也不至于什么都…

文件管理技巧:如何利用文件名关键字进行整理

在日常生活和工作中&#xff0c;我们经常需要处理大量的文件&#xff0c;这些文件可能包含各种类型的信息&#xff0c;如文本、图像、视频、音频等。如何有效地管理和整理这些文件&#xff0c;以便我们能够快速找到所需的文件&#xff0c;是一个非常重要的问题。本文将介绍一种…

ChatGPT是什么?黑客试图淹没其服务

上线2个月&#xff0c;月活跃用户破亿&#xff0c;媒体人用它编辑文案&#xff0c;学生用它写作业&#xff0c;程序员用它编辑代码&#xff0c; 它是谁呢&#xff1f; 它就是火爆全网&#xff08;chatgpt&#xff09;,chatgpt是什么呢&#xff0c;chatgpt是美国研发的一款人工…

AI:77-基于深度学习的工业缺陷检测

🚀 本文选自专栏:人工智能领域200例教程专栏 《人工智能领域200例教程专栏》从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,通过本专栏案例和项目实践,都有参考学习意义。每篇案例都包含代码实例,详细讲解供大家学习。 ✨✨✨ 每一个案例都附带有代码,在本…

YOLOCS:有效降低特征图空间复杂度

论文地址&#xff1a;YOLOCS: Object Detection based on Dense Channel Compression for Feature Spatial Solidification (arxiv.org) 通过压缩特征图的空间分辨率&#xff0c;提高了对象检测的准确性和速度。本文的主要贡献在于引入了一种新的特征空间固化方法&#xff0c;…

SOLIDWORKS 2024新功能之Visualize篇

SOLIDWORKS 2024新功能Visualize 增强了创建引人注目的外观的功能 SOLIDWORKS Visualize 使用 Dassault Systmes 的企业 PBR 着色模型 (DSPBR) 来准确复制金属、玻璃、塑料和其他曲面的逼真外观。 DSPBR 是材料模型&#xff0c;用于基于物理的渲染&#xff0c;受 3DEXPERIENCE…

java数据结构--优先级队列

一.概念 优先级队列是一种特殊类型的队列&#xff0c;它根据每个元素的优先级进行排序和访问。较高优先级的元素将在较低优先级的元素之前被处理。 优先级队列可以使用不同的数据结构实现&#xff0c;包括数组、链表或二叉堆。其中&#xff0c;二叉堆是实现优先级队列的常见选…

在已有的虚拟环境中升级python版本

对于现有的虚拟环境&#xff0c;想升级python版本方法&#xff0c;试了无数的方法终于找对了。 1.首先activate对应的虚拟环境&#xff0c;然后输入下面的命令&#xff1a; conda install python3.8 建议加上镜像源 ​conda install python3.8 -i https://pypi.tuna.tsingh…

长虹智能电视使用123

1、开机 在接通电源的情况下&#xff0c;长虹智能电视开机有两种方式。 方式1&#xff1a; 按电视右下角开机按钮 方式2&#xff1a; 按电视遥控器开机按钮 长虹智能电视开机后会进入其操作系统&#xff08;安卓&#xff09;。 屏幕左右双箭头图表&#xff0c;手指点击会…

如何查看Android 包依赖关系

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、查看依赖关系3.1 方式一3.2 方式二…