el-select不能选择已经选过的项

最新推荐文章于 2024-07-23 09:56:06 发布

原创最新推荐文章于 2024-07-23 09:56:06 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

这篇博客讨论了如何在前端实现检验项目的唯一性验证，通过监听el-select组件的change事件，结合Vue的计算属性和自定义验证规则，确保用户不会选择已添加过的检验项目。同时，介绍了如何在数据变更时更新表单状态，并动态应用不同的验证规则。

       <div class="add-line-border">
          <div
            class="add-line"
            v-for="(item, key) in itemoForm.item_list"
            :key="key"
          >
            <el-form-item
              :label="'检验项目' + (key + 1) + '：'"
              :prop="'item_list.' + key + '.item_id'"
              :rules="ruleList"
            >
              <div class="add-content">
                <div class="add-msg">
                  <el-select
                    @change="currentSel($event, key)"
                    v-model="item.item_id"
                    placeholder="请选择"
                    clearable
                  >
                    <el-option
                      v-for="ii in inspectionItems"
                      :key="ii.id"
                      :label="ii.itemName"
                      :value="ii.id"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="add-options" @click="delItemOption(key)">删除</div>
              </div>
            </el-form-item>
          </div>
        </div>

在data中设置rule，和isSelect值

    rule1: [
        {
          required: true,
          message: '请选择检验项目',
          trigger: 'change',
        },
      ],
      rule2: [
        {

          message: '已经添加过该检验项目啦',

        },
      ],

      isSelect:false,

在compute中计算ruleList的值

  computed: {
    ruleList: function () {
      if (this.isSelect) {
        return this.rule2;
      } else {
        return this.rule1;
      }
    },
  },

在methods方法中

   //判断该选项值是否已经选择过
    count(arr, val) {
      return arr.filter((e) => e.item_id === val).length;
    },
   //el-select的change事件
   currentSel(e, k) {  
      let count = this.count(this.itemoForm.item_list, e);
      if (count > 1.5) {
        //已经选过该值了，触发对应的验证规则
        this.isSelect = true;
        this.$refs['itemForm'].validateField(`item_list.${k}.item_id`)
      } else {
        this.isSelect = false;
        //将选项值存到数组中
        for (let i = 0; i < this.inspectionItems.length; i++) {
          if (this.inspectionItems[i].id == e) {
            this.itemoForm.item_list[k].item_title = this.inspectionItems[i].itemName;
            this.itemoForm.item_list[k].item_type = this.inspectionItems[i].itemType;
          }
        }
      }
    },

如果选择已经选过的数据会提示