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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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微信公众号开发之简答题
2018/10/20 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
Python之文字转图片方法
2018/05/10 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
聊聊python中的循环遍历
2020/09/07 Python
Python基于Faker假数据构造库
2020/11/30 Python
Weblogic的布署方式
2013/08/23 面试题
大学生应聘自荐信
2013/10/11 职场文书
体育教师求职信
2014/06/30 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
工作犯错保证书
2015/05/11 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
工作自我评价范文
2019/03/21 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers