<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. 讨厌的linux----vsftpd 匿名上传配置

    核心一句话: vsftpd: refusing to run with writable anonymous root 匿名账号的根目录,不允许写入,否则匿名登录 验证失败 只有再 ftp 命令操作, ...

  2. PHP系列 | [转] PHP中被忽略的性能优化利器:生成器

    官方:https://www.php.net/manual/zh/language.generators.overview.php 原文:https://segmentfault.com/a/1190 ...

  3. kotlin基础 range

    a = 1..10 //[1,10] b = 1 unitl 10 //[1,10)

  4. 关于“javax.servlet.include.request_uri”属性值 include 请求 RequestDispatcher.include

    在springMVC的DispatcherServlet类的doService方法中有如下代码: 1 2 3 4 5 6 7 8 9 10 if (WebUtils.isIncludeRequest( ...

  5. Centos新服务器需要安装的必备软件包

    yum install -y gcc gcc-c++ kernel-devel yum install -y pcre pcre-devel yum install -y zlib zlib-deve ...

  6. 升级到11.2.0.4后用srvctl无法启用数据库实例,报CRS-0254: authorization failure

    在standby database上从11.2.0.3升级11.2.0.4,然后打了补丁PATCH SET UPDATE 11.2.0.4.190115后,无法用srvctl启动第二个节点数据库实例: ...

  7. 解决 android push framework.jar 不生效的问题

    . . . . . 在 Android 采用 ART 虚拟机后,为了提高运行时效率,在编译期间会将 jar 包中的 dex 文件编译为 odex.vdex 等文件.而这些文件并不存放在 framewo ...

  8. 【翻译】Flink Table Api & SQL — Hive —— 读写 Hive 表

    本文翻译自官网:Reading & Writing Hive Tables  https://ci.apache.org/projects/flink/flink-docs-release-1 ...

  9. 记录一次TraceId的问题

    多服务部署的时候,各个服务通过httpClient进行调用时候,有时候出现问题,需要进行追查.但是如果没有一个标记,就会很迷茫,特别是多个服务来回调用,就无法快速定位问题.这个时候一般是使用MDC的 ...

  10. VM无法正常使用桥接模式获取IP上网

    问题: 有时候会遇到VM使用桥接模式时无法正常获取IP的情况 原因: 初步怀疑是因为你的电脑是双网卡 解决方法: 这时候,就需要修改VM的虚拟网络编辑器的配置 解决步骤: 编辑->虚拟网络编辑器 ...