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 ...
随机推荐
- MyBatis(十):Mybatis 几种批量操作的对比
本章主要讲解几种批量处理的用法及对别,批量处理一般用法包含以下几种: 1)普通foreach处理(没循环一次执行一次与mysql服务器交互操作),实际上也是采用的ExecutorType.SIMPLE ...
- Python安装依赖包及开发工具转移到Visual Studio 2019
#pip升级pip install --upgrade pip#安装pillow图形库pip install pillow #安装二维码库 pip install MyQR PyCharm工具导入依赖 ...
- Vintage_坏客户定义
python信用评分卡建模(附代码,博主录制) https://study.163.com/course/introduction.htm?courseId=1005214003&utm_ca ...
- Java 待学习知识
Java 工厂模式和策略模式 Java 面向对象与面向接口的设计模式 Java 六大设计原则 - 单一职责原则 设计模式之禅 大话设计模式
- [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 ...
- hbase 安装(集群模式)
环境:jdk 1.8 + hadoop2.7.6+zookeeper3.4.9+centos7 一.安装zookeeper(集群模式) 0.安装机器 ip ...
- Java调用动态链接库so文件(传参以及处理返回值问题)
刚来到公司,屁股还没坐稳,老板把我叫到办公室,就让我做一个小程序.我瞬间懵逼了.对小程序一窍不通,还好通过学习小程序视频,两天的时间就做了一个云开发的小程序,但是领导不想核心的代码被别人看到,给了我一 ...
- tp中model加载机制
$user_model = D('User'); 如果当前模块下面有UserModel,就优先使用当前模块下的UserModel.如果当前模块下没有UserModel,就回去Common模块下找Use ...
- docker 学习总结
Docker 是一个容器工具,提供虚拟环境.解决了软件的环境配置和依赖问题,让软件可以带环境和依赖的安装. Docker 将应用程序与该程序的依赖,打包在一个文件里面.运行这个文件,就会生成一个虚拟容 ...
- Delphi快递鸟【支持快递查询和单号识别】
作者QQ:(648437169) 点击下载➨Delphi快递鸟 [delphi快递鸟]支持快递查询.单号识别.