elementUI动态表单 + el-select 按要求禁用问题_vue.js_

项目通过 vue+elementUI 实现

近期开发过程中遇到一个需求，对于从事两年的“小白”来说，确实费了点脑子，才发现，好像是自己一开始想太多了，各种情况设想了一溜够，发现只要反过来想就OK了 ╮(╯▽╰)╭

需求大概是这样的：

在动态增减的表单项中，有一个下拉菜单，要求每选择一项，就把选中过的那一个选项禁用（简单来说就是，已经选过的就不能再选了），且增加的条数不能超过下拉菜单中的选项数量

直接上图吧（label不重要，主要看效果。。。）

先实现最简单的：限制新增数量

判断已新增的数量是否小于下拉菜单中选项的数量

如果小于就新增，否则可以提示一些信息（这里就忽略不写了）

// 新增按钮绑定的 的方法 addType () { if (this.otherForm.other.length < this.typeList.length) { this.otherForm.other.push({ type: '', key: Date.now() }) } } 

下拉菜单已选中的选项 禁用

逻辑很简单，当下拉菜单 change 时，先把所有下拉菜单选项的 disabled 赋值为 false（这里用到排他思想，每次change 都先不禁用，选了哪个禁用哪个），遍历存储表单数据的数组，在下拉菜单的 list 中找到对应的当前被选中的项，将该项的 disabled 设为 true（简单来说就是 现在都有哪项被选择了 就禁用它 ）

changeType (index, Id) { this.typeList.forEach(v => { v.disabled = false for (var i = 0; i < this.otherForm.other.length; i++) { if (this.otherForm.other[i].type === v.Id) { v.disabled = true } } }) } 

移除后要把移除的那条选中项的disabled 设为false

// 移除按钮 绑定事件 removeType (item) { var index = this.otherForm.other.indexOf(item) if (index !== -1) { this.otherForm.other.splice(index, 1) } // 在下拉菜单数据中找到移除的那条的选中项 赋值为false this.typeList.forEach(v => { if (v.Id === item.type && v.disabled) { v.disabled = false } }) } 

完整代码

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！