<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的更多相关文章

  1. vue 动态循环出的多个select 不能重复选择相同的数据

    看图说话 HTML: JS:        1)  2) 3) 有更好的方法可以相互学习.

  2. vue中动态循环model

    vue动态循环model与angular有所不同,angular直接定义一个数组,然后传入循环列表的index即可. 而vue不仅需要定义一个数组,还需要通过接口读出循环的数组长度,然后在create ...

  3. vue中循环时动态绑定值

    在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...

  4. 在vue项目中,解决如何在element表格中循环出图片列!

    效果图: 1,vue项目环境 2,引入element-ui组件 3,制作表格 此处省去制作循环表格数据那步,想看的可以找回我的博客:element中的表格处理:循环出表格数据 今天想在表格出循环出一列 ...

  5. Vue.js——循环(Java、JSTL标签库、数据库)

    一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...

  6. ThinkPhp循环出数据库中的内容并输出到模板

    <foreach name='user' item='v'> //循环出数据库中的内容 对应控制器->方法中的  $this->assign('user',M('user')- ...

  7. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  8. jquery获取当前按钮、截取字符串、字符串拼接、动态循环添加元素

    截取字符串:字符串拼接:动态循环添加元素:获取当前按钮: {data : null, render: function(data, type, row ) { var loginName = $(&q ...

  9. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

随机推荐

  1. MyBatis(十):Mybatis 几种批量操作的对比

    本章主要讲解几种批量处理的用法及对别,批量处理一般用法包含以下几种: 1)普通foreach处理(没循环一次执行一次与mysql服务器交互操作),实际上也是采用的ExecutorType.SIMPLE ...

  2. Python安装依赖包及开发工具转移到Visual Studio 2019

    #pip升级pip install --upgrade pip#安装pillow图形库pip install pillow #安装二维码库 pip install MyQR PyCharm工具导入依赖 ...

  3. Vintage_坏客户定义

    python信用评分卡建模(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_ca ...

  4. Java 待学习知识

    Java 工厂模式和策略模式 Java 面向对象与面向接口的设计模式 Java 六大设计原则 - 单一职责原则 设计模式之禅     大话设计模式

  5. [LeetCode] 769. Max Chunks To Make Sorted 可排序的最大块数

    Given an array arr that is a permutation of [0, 1, ..., arr.length - 1], we split the array into som ...

  6. hbase 安装(集群模式)

    环境:jdk 1.8 + hadoop2.7.6+zookeeper3.4.9+centos7 一.安装zookeeper(集群模式) 0.安装机器 ip                       ...

  7. Java调用动态链接库so文件(传参以及处理返回值问题)

    刚来到公司,屁股还没坐稳,老板把我叫到办公室,就让我做一个小程序.我瞬间懵逼了.对小程序一窍不通,还好通过学习小程序视频,两天的时间就做了一个云开发的小程序,但是领导不想核心的代码被别人看到,给了我一 ...

  8. tp中model加载机制

    $user_model = D('User'); 如果当前模块下面有UserModel,就优先使用当前模块下的UserModel.如果当前模块下没有UserModel,就回去Common模块下找Use ...

  9. docker 学习总结

    Docker 是一个容器工具,提供虚拟环境.解决了软件的环境配置和依赖问题,让软件可以带环境和依赖的安装. Docker 将应用程序与该程序的依赖,打包在一个文件里面.运行这个文件,就会生成一个虚拟容 ...

  10. Delphi快递鸟【支持快递查询和单号识别】

    作者QQ:(648437169) 点击下载➨Delphi快递鸟 [delphi快递鸟]支持快递查询.单号识别.