elementUI动态表单 + el-select 按要求禁用

最新推荐文章于 2025-05-09 15:52:03 发布

原创

最新推荐文章于 2025-05-09 15:52:03 发布 · 9.8k 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了使用Vue和ElementUI框架如何实现动态表单项中的下拉菜单功能，当选择一个选项后自动禁用该选项，并限制新增表单项不超过下拉菜单选项总数。通过`addType`、`removeType`和`changeType`方法实现了增删操作及禁用逻辑，提供了一段完整的Vue组件代码示例。

项目通过 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
      }
    }
  })
}