elementUI form表单 el-select多个下拉选不可重复选择

Shining_F

已于 2023-08-30 11:33:47 修改

阅读量363

点赞数

分类专栏： vue2项目知识点文章标签： elementui 前端 vue.js

于 2023-08-30 11:27:55 首次发布

本文链接：https://blog.csdn.net/Shining_F/article/details/132577034

版权

vue2项目知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<template>

  <div>

    <el-form ref="form" :rules="rules" :model="FormData">

    <div class="setPrize" v-for="(item,index) in FormData.checkList" :key="index">

      <el-form-item label="" :rules="rules.checkId" :prop="'checkList.'+index+'.checkId'">

        <el-select v-model="item.checkId" @change="changeSelect(item)" placeholder="请选择">

          <el-option

            v-for="item in optionList"

            :disabled="item.disabled"

            :key="item.id"

            :label="item.name"

            :value="item.id">

          </el-option>

        </el-select>

      </el-form-item>

    </div>

    </el-form>

  </div>

</template>

<script>

export default {

  data() {

    return {

      optionList:[{id:1,name: '111'},{id:2,name: '222'},{id:3,name: '333'},{id:4,name: '444'}],
      FormData:{
        checkList:[{checkId: ''},{ checkId: ''},{checkId: ''},{checkId: ''}]
      },
      rules: {

        checkId: [

          { required: true, message: '请选择选项', trigger: 'change' },

        ],

      }

    }

  },

  methods: {

    changeSelect() {

      this.setDisable()

    },

    //   //1、 循环 下拉选择框里的每一项， 和FormData.checkList得每一项做对比。如果对比成功就结束FormData.checkList得循环把下拉框对应得item.disable设置为true， 否则设置为false。

    // setDisable(){

    //   this.optionList.forEach(item=> {

    //     for( let i = 0; i < this.FormData.checkList.length; i++){

    //       if(item.id==this.FormData.checkList[i].checkId) {

    //         item.disabled = true

    //         break ;

    //       }else{

    //         item.disabled = false

    //       }

    //     }

    //   })

    // },

      //2、循环 下拉选择框里的每一项，通过findIndex()函数查找FormData.checkList里是否有相同时有则把下拉框对应得item.disable设置为true， 否则设置为false

    setDisable(){

      this.optionList.forEach(item=> {

        let isdisable = this.FormData.checkList.findIndex((val) => val.checkId ==item.id)

        if(isdisable!=-1){

          item.disabled = true

        }else {

          item.disabled = false

        }

      })

    },

  }



}

</script>