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 相关文章推荐
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
js特殊字符转义介绍
Nov 05 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 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
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php的curl封装类用法实例
2014/11/07 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python 的类、继承和多态详解
2017/07/16 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
西班牙宠物用品和食品网上商店:Tiendanimal
2019/06/06 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
内科护士实习自我鉴定
2013/10/17 职场文书
解除施工合同协议书
2014/10/17 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
对公司的意见和建议
2015/06/04 职场文书
优秀班干部主要事迹材料
2015/11/04 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL