vue动态循环出的多个select出现过的变为disabled(实例代码)


Posted in Javascript onNovember 10, 2019

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>

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

<template>
 <div class="program" v-for="(parItem,index) in parArr" :key="parItem.guid">
  <Select v-model="parItem.id" @on-change="onChangeProgram">
   <Option v-for="(subItem,idx) in programList" :key="subItem.id" :data-index='idx'
    v-show="parItem.id == subItem.id || !selectIdsArr.includes(subItem.id)"
    :value="subItem.id> {{subItem.name}}</Option>
  </Select>
 </div>
</template>
<script>
export default {
 data() {
  return {
   parArr:[],
   selectIdsArr:[],
   programList:[{
    "id":1,
    "name":"选项1"
   },{
    "id":2,
    "name":"选项2"
   },{
    "id":3,
    "name":"选项3"
   }],
  }
 },
 methods: {
  onChangeProgram() {
   this.selectIdsArr = [];
   for (const item of this.parArr) {
    if (item.id) {
     this.selectIdsArr.push(item.id);
    }
   }
  },
 },
}
</script>

总结

以上是小编给大家分享的vue动态循环出的多个select出现过的变为disabled效果,希望对大家有所帮助!

Javascript 相关文章推荐
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
Nov 23 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
js is_valid_filename验证文件名的函数
Jul 19 Javascript
详解angular脏检查原理及伪代码实现
Jun 08 Javascript
详解JavaScript 的变量
Mar 08 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
js调用网络摄像头的方法
Dec 05 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 #Javascript
分享Angular http interceptors 拦截器使用(推荐)
Nov 10 #Javascript
vue-父子组件和ref实例详解
Nov 10 #Javascript
vue $set 给数据赋值的实例
Nov 09 #Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 #Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 #Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 #Javascript
You might like
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
ie 调试javascript的工具
2009/04/29 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
2016/07/01 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
windows下ipython的安装与使用详解
2016/10/20 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
电子信息毕业生自荐信
2013/11/16 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
文秘个人求职信范文
2014/04/22 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
2015年工商所工作总结
2015/05/21 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Redis读写分离搭建的完整步骤
2021/09/14 Redis
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
Java死锁的排查
2022/05/11 Java/Android
oracle数据库去除重复数据
2022/05/20 Oracle