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 ...
随机推荐
- Xamarin.FormsShell基础教程(6)Shell项目内容详情页面
Xamarin.FormsShell基础教程(6)Shell项目内容详情页面 轻拍内容列表页面中的任意一项内容后,进入内容详情页面,如图1.6和图1.7所示.该页面中显示了内容项的标题和具体内容.该页 ...
- SNF快速开发平台2019-权限管理模型简介-权限都在这里
1.1 权限的概念 权限是指为了保证职责的有效履行,任职者必须具备的,对某事项进行决策的范围和程度.它常常用“具有批准……事项的权限”来进行表达.例如,具有批准预算外5000元以内的礼品费支出的 ...
- 【转】Sql Server查看所有数据库名,表名,字段名(SQL语句)
-- 获取所有数据库名 select * from master..SysDatabases; -- 获取hotline数据库中所有表名 select name from hotline..SysOb ...
- 百度网盘快速下载工具下载:Pandownload下载
众所周知的百度网盘下载限速很厉害,所以就有了快速下载工具出现了.一般情况下,按照家里网速有多快,使用工具下载就有多快. 可以直接复制如下图进行下载: 另外,PanDownload[百度网盘下载工具]无 ...
- gitlib配置push后自动触发jenkins构建sonar扫描
jenkins所用到的插件: Gitlab Hook Plugin 配置步骤 1.先进入gitlab的个人设置,生成api token 2.复制生成的访问令牌,打开jenkins的凭据,添加选择类型是 ...
- LwIP应用开发笔记之七:LwIP无操作系统HTTP服务器
前面我们实现了TCP服务器和客户端的简单应用,接下来我们实现一个基于TCP协议的应用协议,那就是HTTP超文本传输协议 1. HTTP协议简介 超文本传输协议(Hyper Text Transf ...
- 使用pkg打包node.js项目(egg框架)为可执行包
问题: 公司有个工具型项目使用node.js 开发,需要部署到客户的服务器中,遇到的问题: 1.客户的服务器没有外网.环境配置,依赖安装等都比较麻烦,只能手工上传,最好能一个文件直接搞定: 2.直接包 ...
- fail2ban的功能和特性(实测)
fail2ban的功能和特性 https://fedoraproject.org/wiki/Fail2ban_with_FirewallD 1.支持大量服务.如sshd,apache,qmail,pr ...
- EF的 NoTracking 的一些记录
NoTracking官方解释 跟踪与非跟踪查询 跟踪行为可控制 Entity Framework Core 是否将有关实体实例的信息保留在其更改跟踪器中. 如果已跟踪某个实体,则该实体中检测到的任何更 ...
- (转)IntelliJ IDEA 插件 阿里巴巴Java开发手册(Alibaba Java Coding Guidelines)
背景:idea安装插件,学习使用阿里巴巴开发插件. 在线和离线的安装方式. IntelliJ IDEA 插件 阿里巴巴Java开发手册(Alibaba Java Coding Guidelines) ...