vue动态循环出的多个select出现过的变为disabled
<template>
<div class="artcle">
<el-form
label-width="100px"
:model="testForm">
<el-form-item
v-for="(vtem, index) in testForm.version"
:key="index"
label="命令版本">
<el-select
@change="comChange"
v-model="vtem.ver">
<el-option
v-for="item in versionList"
:key="item.id"
:value="item.id"
:disabled="item.id == vtem.ver || selectedArr.includes(item.id)"
:label="item.name">
</el-option>
</el-select>
<el-button
icon="el-icon-circle-plus-outline"
size="small"
@click="add(index)"
circle></el-button>
<el-button
icon="el-icon-remove-outline"
size="small"
@click="remove(index)"
:disabled="index === 0"
circle></el-button>
</el-form-item>
<el-form-item
label="测试输入框">
<el-input
v-model="testForm.input"></el-input>
</el-form-item>
</el-form>
</div>
</template>
 export default {
   name: 'home',
   data () {
     return {
       selectedArr: [], // 作为判断是否重复的数组
       testForm: {
         version: [
           { ver: '' }
         ],
         input: ''
       },
       versionList: [
         { id: 1, name: '1.1' },
         { id: 2, name: '1.2' },
         { id: 3, name: '1.3' }
       ]
     }
   },
   methods: {
     add () {
       let version = this.testForm.version
       if (version.length < this.versionList.length) {
         this.testForm.version.push({
           ver: ''
         })
       } else {
         alert('命令版本就三条')
       }
     },
     remove (index) {
       this.selectedArr.splice(index, 1)
       this.testForm.version.splice(index, 1)
     },
   // 下拉改变时
     comChange (index) {
       this.selectedArr = []
       for (let item of this.testForm.version) {
         if (item.ver) {
           this.selectedArr.push(item.ver)
         }
       }
     }
   }
 }
vue动态循环出的多个select出现过的变为disabled的更多相关文章
- vue 动态循环出的多个select  不能重复选择相同的数据
		看图说话 HTML: JS: 1) 2) 3) 有更好的方法可以相互学习. 
- vue中动态循环model
		vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ... 
- vue中循环时动态绑定值
		在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ... 
- 在vue项目中,解决如何在element表格中循环出图片列!
		效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ... 
- Vue.js——循环(Java、JSTL标签库、数据库)
		一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ... 
- ThinkPhp循环出数据库中的内容并输出到模板
		<foreach name='user' item='v'> //循环出数据库中的内容 对应控制器->方法中的 $this->assign('user',M('user')- ... 
- Vue动态组件
		前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ... 
- jquery获取当前按钮、截取字符串、字符串拼接、动态循环添加元素
		截取字符串:字符串拼接:动态循环添加元素:获取当前按钮: {data : null, render: function(data, type, row ) { var loginName = $(&q ... 
- vue.js循环for(列表渲染)详解
		vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ... 
随机推荐
- List和数组的互转
			list转数组: /要转换的list集合 List<String> testList = new ArrayList<String>(){{add("aa" ... 
- Python80个练手项目列表
			原文地址:https://www.shiyanlou.com/questions/102676/?utm_source=baidu&utm_medium=cpc&utm_campaig ... 
- Java: 线程池(ThreadPoolExecutor)中的参数说明
			最近在看<阿里巴巴Android开发手册>,里面有这样几句话: [强制]新建线程时,必须通过线程池提供(AsyncTask 或者ThreadPoolExecutor或者其他形式自定义的线程 ... 
- java--poi读取excel图片和内容(支持03版本)
			有的时候需要将excel中所包含的图片在导入的时候取出来存到服务器中, 详细实现代码如下: package com.liuf.util; import java.io.BufferedInputStr ... 
- WebGL学习笔记(十一):混合和透明
			到目前为止我们绘制了不少模型,用到了不少颜色,颜色中有四个分量(RGBA),其中的A分量表示透明度,这个分量目前为止我们还没有真正的用到: A分量,表示的是当前的透明度,如果设定为 0.5 就会半透明 ... 
- Go 汇编入门
			https://golang.org/doc/asm https://github.com/teh-cmc/go-internals/tree/master/chapter1_assembly_pri ... 
- Flask 上传下载文件
			上传文件示例代码 #encoding:utf8 from werkzeug.utils import secure_filename from flask import Flask,render_te ... 
- RHEL 7.6 设置时间同步ntp
			1.服务端和客户端 安装包,检查状态 yum install ntp ntpdate -y systemctl start ntpd systemctl status ntpd 2.服务端 修改配置 ... 
- Java分布式:分布式锁之Zookeeper
			Java分布式:分布式锁之Zookeeper 分布式锁系列教程重点分享锁实现原理 引入ZooKeeper ZooKeeper是什么呢? ZooKeeper 是一个开源的分布式协调服务,它可以在分布式系 ... 
- nginx deny 封IP
			官方文档地址:http://nginx.org/en/docs/http/ngx_http_access_module.html#deny Syntax: deny address | CIDR | ... 
