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级联下拉列表实例代码(自写)
May 10 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
jquery退出each循环的写法
Feb 26 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 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+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php数组去除空值函数分享
2015/02/02 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
javascript 流畅动画实现原理
2009/09/08 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python文件操作基本流程代码实例
2017/12/11 Python
自定义django admin model表单提交的例子
2019/08/23 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
个人培训自我鉴定
2014/03/28 职场文书
个人股份合作协议书
2014/10/24 职场文书
爱心捐助活动总结
2015/05/09 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
致运动员加油稿
2015/07/21 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
html form表单基础入门案例讲解
2021/07/15 HTML / CSS