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

2022-11-13 18:42

短信预约 -IT技能 免费直播动态提醒

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

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

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

// 新增按钮绑定的 的方法
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>

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

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

阅读原文内容投诉