当前位置: 首页 > news >正文

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

<!--每个意愿最少5个字--><el-form-item label="客户意愿">   <el-selectstyle="width: 340px;"multiplev-model="form.intentionTags"clearablefilterableplaceholder="请输入品牌名称"                      @keyup.enter.native="handleEnterKey":loading="loading"><el-optionv-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*/   

http://www.dtcms.com/a/319457.html

相关文章:

  • CD61.【C++ Dev】多态(1)
  • 腾讯云EdgeOne产品深度分析报告
  • Docker入门教程:在腾讯云轻量服务器上部署你的第一个容器化应用 (2025)
  • 基于Matlab图像处理的黄豆自动计数系统设计与实现
  • 【数据结构入门】双向链表
  • Windows中安装rustup-init.exe以及cargo build报错443
  • ENSP 中静态路由负载分担
  • linux开发之mmap内存映射
  • 算法解决爬楼梯问题
  • SQL注入攻击基础
  • 【LVGL自学笔记暂存】
  • 如何正确选择建站工具?
  • FPGA高端项目:图像采集+Aurora 8B10B+UDP图传架构,基于GTP高速收发器的光口转网口,提供4套工程源码和技术支持
  • 旧物回收小程序系统开发:连接你我,共筑环保梦想
  • Linux下动态库链接的详细过程
  • 【网络运维】Linux:NFS服务器原理及配置
  • Kafka数据生产和发送
  • RuoYi OpenAPI集成从单体到微服务改造全过程记录
  • 高速公路安装定向广播的优势
  • centos VMware ESXi 扩容
  • 为什么任务顺序会影响效率?如何实现自定义顺序?
  • Python 基础详解:数据类型(Data Types)—— 程序的“数据基石”
  • Fiddler 安装配置教程
  • 认识汇编:解码计算机思维的底层语言(第一章)
  • 【YOLO学习笔记】YOLOv8详解解读
  • WEB开发-第二十七天(PHP篇)
  • 【Unity Plugins】使用ULipSync插件实现人物唇形模拟
  • 基于Spring Cloud Stream与Kafka的事件驱动微服务架构设计与实战指南
  • 【Python】基于Python自动化邮件发送系统:从配置到实现的完整指南
  • 【YOLOv8改进 - C2f融合】C2f融合SFS-Conv(空间 - 频率选择卷积)提升特征多样性,同时减少参数和计算量