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

 更新时间:2022年10月22日 09:14:32   作者:_早睡身体好  
这篇文章主要介绍了elementUI动态表单 + el-select 按要求禁用问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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

完整代码

<template>
  <div>
    <el-form :model="otherForm" ref="otherForm" label-width="100px">
      <el-form-item
        v-for="(other, index) in otherForm.other"
        :label="'类型' + index"
        :key="index"
        :prop="'other.' + index + '.type'">
        <el-select v-model="other.type" placeholder="请选择" @change="changeType(index, other.type)">
          <el-option
            v-for="item in typeList"
            :key="item.Id"
            :label="item.label"
            :value="item.Id"
            :disabled="item.disabled">
          </el-option>
        </el-select>
        <el-button @click.prevent="removeType(other)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="addType">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      otherForm: {
        other: [{
          type: ''
        }]
      },
      typeList: [{
        Id: 1,
        label: '报名费'
      }, {
        Id: 2,
        label: '饭费'
      }, {
        Id: 3,
        label: '餐费'
      }, {
        Id: 4,
        label: '书本费'
      }]
    }
  },
  methods: {
    // 删除
    removeType (item) {
      var index = this.otherForm.other.indexOf(item)
      if (index !== -1) {
        this.otherForm.other.splice(index, 1)
      }
      this.typeList.forEach(v => {
        if (v.Id === item.type && v.disabled) {
          v.disabled = false
        }
      })
    },
    // 新增
    addType () {
      if (this.otherForm.other.length < this.typeList.length) {
        this.otherForm.other.push({
          type: '',
          key: Date.now()
        })
      }
    },
    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
          }
        }
      })
    }
  }
}
</script>

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

相关文章

  • Vue 理解之白话 getter/setter详解

    Vue 理解之白话 getter/setter详解

    这篇文章主要介绍了Vue getter setter,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例

    这篇文章主要给大家介绍了关于使用vue3+ts+setup获取全局变量getCurrentInstance的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
    2022-08-08
  • vue axios拦截器常用之重复请求取消

    vue axios拦截器常用之重复请求取消

    我们大家在开发中,经常会遇到接口重复请求导致的各种问题,下面这篇文章主要给大家介绍了关于axios拦截器之重复请求取消的相关资料,需要的朋友可以参考下
    2021-09-09
  • 在Vue3项目中使用如何echarts问题

    在Vue3项目中使用如何echarts问题

    这篇文章主要介绍了在Vue3项目中使用如何echarts问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 如何在vite初始化项目中安装scss以及scss的使用

    如何在vite初始化项目中安装scss以及scss的使用

    今天想要给vite项目,添加全局的scss变量文件引用,这样我们在使用scss变量和函数的时候就不需要每个组件都取引用了,下面这篇文章主要给大家介绍了关于如何在vite初始化项目中安装scss以及scss使用的相关资料,需要的朋友可以参考下
    2022-10-10
  • Vue 项目中如何使用fullcalendar 时间段选择插件(类似课程表格)

    Vue 项目中如何使用fullcalendar 时间段选择插件(类似课程表格)

    最近完成一个项目,需要选择一个会议室,但是最好能够通过在图上显示出该 会议室在某某时间段内已经被预定了,初看这个功能感觉很棘手,仔细分析下实现起来还是挺容易的,下面通过示例代码讲解Vue项目中使用fullcalendar时间段选择插件,感兴趣的朋友一起看看吧
    2024-07-07
  • Vue实现星空效果

    Vue实现星空效果

    这篇文章主要为大家详细介绍了Vue实现星空效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue实现点击选中,其他的不选中方法

    vue实现点击选中,其他的不选中方法

    今天小编就为大家分享一篇vue实现点击选中,其他的不选中方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解

    vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserve

    这篇文章主要介绍了vue3 图片懒加载的两种方式、IntersectionObserver和useIntersectionObserver实例详解,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • Vue 可拖拽组件Vue Smooth DnD的使用详解

    Vue 可拖拽组件Vue Smooth DnD的使用详解

    最近需要有个拖拽列表的需求,发现一个简单好用的 Vue 可拖拽组件,本文主要介绍了可拖拽组件Vue Smooth DnD的使用,感兴趣的可以了解一下
    2021-07-07

最新评论