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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
js实现3d悬浮效果
Feb 16 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
关于angular 8.1使用过程中的一些记录
Nov 25 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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
使用Limit参数优化MySQL查询的方法
2008/11/12 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
javascript 建设银行登陆键盘
2008/06/10 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
javascript 数据存储的常用函数总结
2017/06/01 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
2019/06/04 jQuery
vue按需加载实例详解
2019/09/06 Javascript
vue3.0封装轮播图组件的步骤
2021/03/04 Vue.js
python计算一个序列的平均值的方法
2015/07/11 Python
Python基本语法经典教程
2016/03/11 Python
Python多继承顺序实例分析
2018/05/26 Python
一行Python代码过滤标点符号等特殊字符
2019/08/12 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
银行贷款承诺书
2014/03/29 职场文书
学校花圃的标语
2014/06/18 职场文书
委托公证书样本
2015/01/23 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle