vue2+elementui select框可以选择可以回车添加新的option

发布于:2025-08-10 ⋅ 阅读:(22) ⋅ 点赞:(0)

<!--每个意愿最少5个字-->
        <el-form-item label="客户意愿">   
          <el-select
            style="width: 340px;"
            multiple
            v-model="form.intentionTags"
            clearable
            filterable
            placeholder="请输入品牌名称"                      
            @keyup.enter.native="handleEnterKey"
            :loading="loading"
            >
            <el-option
              v-for="item in dynamicOptions"
              :key="item.id"
              :label="item.tagContent"
              :value="item.id">
            </el-option>
          </el-select>     
          <span style="margin-left: 10px; font-size: 12px; color: red;">(输入值后点击Enter可新增标签)</span>
        </el-form-item>

/*标签部分-start*/
    handleEnterKey(event) {
      const inputValue = event.target.value.trim();      
      if (!inputValue) return;
      if(inputValue.length < 5){
        this.$message.warning('新增的标签至少5个字符');
        return
      }else if(inputValue.length > 15){
        this.$message.warning('新增的标签最多15个字符');
        return
      }
      
      // 检查是否已存在相同标签
      const exists = this.dynamicOptions.some(
        item => item.tagContent == inputValue
      );
      
      if (exists) {
        this.$message.warning('该标签已存在');
        event.target.value = ''; // 清空输入框
        return;
      }
      
      // 调用新增标签接口
      this.addNewTag(inputValue);
      event.target.value = ''; // 清空输入框
    },
    async addNewTag(val){
      try {
        const response = await cxxxCreate({ tagContent: val});      
        if (response.data.code == '0') {          
          const newTag = response.data.data;
          this.dynamicOptions.unshift(newTag);
          this.$nextTick(function(){
            this.form.intentionTags.unshift(newTag.id);
          })          
          this.$message.success('标签添加成功');
        } else {
          this.$message.error(response.data.msg || '标签添加失败');
        }
      } catch (error) {
        this.$message.error('标签添加失败');
      }
    },
    loadBrandOptions(query) { 
      let params = {
        tagContent: query
      }
      cxxxTagList(params).then(
        response => {    
          this.dynamicOptions = response.data.data
        }
      );
    },  
    /*标签部分-end*/   


网站公告

今日签到

点亮在社区的每一天
去签到