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 ...
随机推荐
- 【用例篇】Xmind转为csv 导入禅道
用过禅道的都知道,用例维护实在是太不方便了,有人推荐了一种方法,用Xmind先编写用例(思路比较清晰),写好之后借助工具(xmind2testcase)将用例转为CSV格式,之后再导入禅道 参考资料: ...
- bootcss 之 .table-hover 类 鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应. <table class="table table-hover" ...
- spring boot启动无法访问controller
如题,检测 一.启动类Application是不是在最上一级,默认扫描启动类平级和下级目录的bean 二.启用内置Tomcat,注释掉 scope <dependency> <gro ...
- C# IL 生成EXE
C:\Windows\Microsoft.NET\Framework64\v4.0.30319\ilasm /exe /output=C:\datacapture.exe /Resource=data ...
- 禁用 Ubuntu 18.04 Files 的 Type Ahead search 功能
. . . . . Ubuntu 的文件浏览器(Files)提供了一个搜索的功能,叫做“Type Ahead search”.即我们在文件浏览器中输入某个文件的名字时,Files 并不是将焦点定位在某 ...
- echarts柱状图坐标文字显示不完整解决方式
echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...
- node.js执行shell命令进行服务器重启
nodejs功能强大且多样,不只是可以实现 服务器端 与 客户端 的实时通讯,另一个功能是用来执行shell命令 1.首先,引入子进程模块var process = require('child_pr ...
- PowerShell学习笔记
1,ps7官方文档 2,使用脚本生成帮助文档 function Add-Node { param ( $selectedNode, $name, $tag ) $newNode = new-objec ...
- CVE-2019-16278-Nostromo Web Server远程代码执行
本文主题主要是分析CVE-2019-16278漏洞原因.漏洞如何利用以及为什么会受到攻击.这个CVE跟Nostromo Web服务器(又名nhttpd)有关,这个组件是在FreeBSD,OpenBSD ...
- JobStorage.Current property value has not been initialized. You must set it before using Hangfire Client or Server API.
JobStorage.Current property value has not been initialized. You must set it before using Hangfire Cl ...