快捷導(dǎo)航

elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題

更新時(shí)間：2022年10月22日 09:14:32 作者：_早睡身體好

這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

近期開發(fā)過程中遇到一個(gè)需求，對(duì)于從事兩年的“小白”來說，確實(shí)費(fèi)了點(diǎn)腦子，才發(fā)現(xiàn)，好像是自己一開始想太多了，各種情況設(shè)想了一溜夠，發(fā)現(xiàn)只要反過來想就OK了 ╮(╯▽╰)╭

需求大概是這樣的：

在動(dòng)態(tài)增減的表單項(xiàng)中，有一個(gè)下拉菜單，要求每選擇一項(xiàng)，就把選中過的那一個(gè)選項(xiàng)禁用（簡單來說就是，已經(jīng)選過的就不能再選了），且增加的條數(shù)不能超過下拉菜單中的選項(xiàng)數(shù)量

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

演示圖

先實(shí)現(xiàn)最簡單的：限制新增數(shù)量

判斷已新增的數(shù)量是否小于下拉菜單中選項(xiàng)的數(shù)量

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

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

下拉菜單已選中的選項(xiàng) 禁用

邏輯很簡單，當(dāng)下拉菜單 change 時(shí)，先把所有下拉菜單選項(xiàng)的 disabled 賦值為 false（這里用到排他思想，每次change 都先不禁用，選了哪個(gè)禁用哪個(gè)），遍歷存儲(chǔ)表單數(shù)據(jù)的數(shù)組，在下拉菜單的 list 中找到對(duì)應(yīng)的當(dāng)前被選中的項(xiàng)，將該項(xiàng)的 disabled 設(shè)為 true（簡單來說就是現(xiàn)在都有哪項(xiàng)被選擇了就禁用它）

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
      }
    }
  })
}

移除后要把移除的那條選中項(xiàng)的disabled 設(shè)為false

// 移除按鈕 綁定事件
removeType (item) {
  var index = this.otherForm.other.indexOf(item)
  if (index !== -1) {
    this.otherForm.other.splice(index, 1)
  }
  // 在下拉菜單數(shù)據(jù)中找到移除的那條的選中項(xiàng) 賦值為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="請(qǐng)選擇" @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: '報(bào)名費(fèi)'
      }, {
        Id: 2,
        label: '飯費(fèi)'
      }, {
        Id: 3,
        label: '餐費(fèi)'
      }, {
        Id: 4,
        label: '書本費(fèi)'
      }]
    }
  },
  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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: