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

解决element的select组件创建新的选项可多选且opitions数据源中有数据的情况下,回车不能自动选中创建的问题

前言

最近开发项目使用element-plus库内的select组件,其中有提供一个创建新的选项的用法,但是发现一些小问题,在此记录

版本

“element-plus”: “^2.3.9”,
“vue”: “^3.3.4”,

问题

1、在options数据源中无数据的时候,在输入框中输入要创建的选项,ele会自动帮我们选中第一条,然后回车后会自动给绑定值中push进一条数据进去
2、但是options数据源中有数据的时候,若输入框中的值可以匹配上数据源的话回车后会自动选中,但是再无数据的时候需要回车后创建数据却无法选中

解决办法

有数据源的情况下直接监听回车事件,再敲击回车后后获取到输入框中的值手动将值添加进去

代码如下

<script setup>
import { ref } from 'vue'
const options = ref([{value: 'HTML',label: 'HTML',},{value: 'CSS',label: 'CSS',},{value: 'JavaScript',label: 'JavaScript',},
])
const selectValue = ref([])
// 获取select实例
const selectRef = ref(null)
// 监听select回车事件
const selectCreate = function() {// 当options数据源中无值的话,回车后elementplus是可以正常新增的,无需手动添加if (options.value.length === 0) return// 通过select实例获取到内部input节点const inputDom = selectRef.value.input// 通过input节点获取到输入值const domValue = inputDom.value// 过滤掉空的数据if (!domValue) return// 将输入值手动push进selectValue中selectValue.value.push(domValue)// 最后将input中的值清空即可selectRef.value.input = ''
}</script><template><el-select ref="selectRef" v-model="selectValue" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="回车后创建" @keyup.enter.native="selectCreate"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/></el-select>
</template><style scoped>
</style>

拓展

既然是创建新选项,但是在创建完成后数据源中却没有新增出来一条,不知道你们是否跟我有同样的疑问,可能是因为新创建出来的选项并非属于原有数据源所以ele开发人员才并未提供可以直接加入到数据源中的api吧
既然我们都可以通过获取实例的方式获取到input中当前输入的值了,那么直接改造一下,手动加进去不就行了吗
代码如下

<script setup>
import { ref } from 'vue'const options = ref([])
// 拓展,既然可以获取到数据框中的值了,那么在回车创建完选项后,顺带在数据源中也新增一条数据也是可以的,毕竟这样才更加符合创建了一个新的选项
const selectValue = ref([])
// 获取select实例
const selectRef = ref(null)
// 监听select回车事件
const selectCreate = function() {// 当options数据源中无值的话,回车后elementplus是可以正常新增的,无需手动添加,且监听到回车后input值也是空的if (options.value.length === 0) return// 通过select实例获取到内部input节点const inputDom = selectRef.value.input// 通过input节点获取到输入值const domValue = inputDom.value// 过滤掉空的数据if (!domValue) return// 将输入值手动push进selectValue中selectValue.value.push(domValue)// 手动在数据源中也新增一条进去options.value.push({value: selectRef.value.input.value,label: selectRef.value.input.value});// 最后将input中的值清空即可selectRef.value.input = ''
}
// 选项被选中后回调
const selectChange = function(seleItem) {const data = seleItem[seleItem.length - 1]if (!data) return// 判断数据源中没有的话,手动加入if (options.value.every(item => item.value !== data)) {options.value.push({value: data,label: data});}
}</script><template><el-select ref="selectRef" v-model="selectValue" multiple filterable allow-create default-first-option :reserve-keyword="false" placeholder="回车后创建" @keyup.enter.native="selectCreate" @change="selectChange"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/></el-select>
</template><style scoped>
</style>

相关文章:

解决element的select组件创建新的选项可多选且opitions数据源中有数据的情况下,回车不能自动选中创建的问题

前言 最近开发项目使用element-plus库内的select组件&#xff0c;其中有提供一个创建新的选项的用法&#xff0c;但是发现一些小问题&#xff0c;在此记录 版本 “element-plus”: “^2.3.9”, “vue”: “^3.3.4”, 问题 1、在options数据源中无数据的时候&#xff0c;在输入框…...

人工智能大模型加速数据库存储模型发展 行列混合存储下的破局

数据存储模型 ​专栏内容&#xff1a; postgresql内核源码分析手写数据库toadb并发编程toadb开源库 个人主页&#xff1a;我的主页 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 概述 在数据库的发展过程中&#xff0c;关…...

K8S用户管理体系介绍

1 K8S账户体系介绍 在k8s中&#xff0c;有两类用户&#xff0c;service account和user&#xff0c;我们可以通过创建role或clusterrole&#xff0c;再将账户和role或clusterrole进行绑定来给账号赋予权限&#xff0c;实现权限控制&#xff0c;两类账户的作用如下。 server acc…...

实现chatGPT 聊天样式

效果图 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Chat Example</title&g…...

day9 STM32 I2C总线通信

I2C总线简介 I2C总线介绍 I2C&#xff08;Inter-Integrated Circuit&#xff09;总线&#xff08;也称IIC或I2C&#xff09;是由PHILIPS公司开发的两线式串行总线&#xff0c;用于连接微控制器及其外围设备&#xff0c;是微电子通信控制领域广泛采用的一种总线标准。 它是同步通…...

终极Shell:Zsh(CentOS7 安装 zsh 及 配置 Oh my zsh)

CentOS7 安装 zsh 及 配置 Oh my zsh 我们在通过Shell操作linux终端时&#xff0c;配置、颜色区分、命令提示大都达不到我们预期的效果或者操作较为繁琐。 今天就来介绍一款终极一个及其好用的类Linux系统中的终端软件,江湖称之为马车中的跑车,跑车中的飞行车,史称『终极 Shell…...

Redis的数据持久化

前言 本文主要介绍Redis的三种持久化方式、AOF持久化策略等 什么是持久化 持久化是指将数据在内存中的状态保存到非易失性介质&#xff08;如硬盘、固态硬盘等&#xff09;上的过程。在计算机中&#xff0c;内存中的数据属于易失性数据&#xff0c;一旦断电或重启系统&#…...

CSS 选择器

前言 基础选择器 以下是几种常见的基础选择器。 标签选择器&#xff1a;通过HTML标签名称选择元素。 例如&#xff1a; p {color: red; } 上述样式规则将选择所有<p>标签 &#xff0c;并将其文字颜色设置为红色。 类选择器&#xff1a;通过类名选择元素。使用类选择…...

上位机工作总结(2023.03-2023.08)

1.工作总结 不知不觉&#xff0c;已经从C#转为Qt开发快半年了。这半年内&#xff0c;也是学习了很多C相关的开发技能&#xff0c;同时自己的技术栈也是进一步丰富&#xff0c;以后跑路就更容易啦&#xff0c;哈哈&#xff01;自己之前就有Winform和一些简单的Qt项目实践&#…...

APSIM模型参数优化 批量模拟丨气象数据准备、物候发育和光合生产、物质分配与产量模拟、土壤水分平衡算法、土壤碳氮平衡模块、农田管理模块等

随着数字农业和智慧农业的发展&#xff0c;基于过程的农业生产系统模型在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农田固碳和温室气体排放等领域扮演着越来越重要的作用。APSIM (Agricultural Production Systems sIMulator)模型是世界知名的作物生…...

Azure防火墙

文章目录 什么是Azure防火墙如何部署和配置创建虚拟网络创建虚拟机创建防火墙创建路由表&#xff0c;关联子网、路由配置防火墙策略配置应用程序规则配置网络规则配置 DNAT 规则 更改 Srv-Work 网络接口的主要和辅助 DNS 地址测试防火墙 什么是Azure防火墙 Azure防火墙是一种用…...

【LeetCode】剑指 Offer Ⅱ 第4章:链表(9道题) -- Java Version

题库链接&#xff1a;https://leetcode.cn/problem-list/e8X3pBZi/ 类型题目解决方案双指针剑指 Offer II 021. 删除链表的倒数第 N 个结点双指针 哨兵 ⭐剑指 Offer II 022. 链表中环的入口节点&#xff08;环形链表&#xff09;双指针&#xff1a;二次相遇 ⭐剑指 Offer I…...

Android SDK 上手指南|| 第三章 IDE:Android Studio速览

第三章 IDE&#xff1a;Android Studio速览 Android Studio是Google官方提供的IDE&#xff0c;它是基于IntelliJ IDEA开发而来&#xff0c;用来替代Eclipse。不过目前它还属于早期版本&#xff0c;目前的版本是0.4.2&#xff0c;每个3个月发布一个版本&#xff0c;最近的版本…...

Vue--》打造个性化医疗服务的医院预约系统(七)完结篇

今天开始使用 vue3 + ts 搭建一个医院预约系统的前台页面,因为文章会将项目的每一个地方代码的书写都会讲解到,所以本项目会分成好几篇文章进行讲解,我会在最后一篇文章中会将项目代码开源到我的GithHub上,大家可以自行去进行下载运行,希望本文章对有帮助的朋友们能多多关…...

点亮一颗LED灯

TOC LED0 RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOB,ENABLE);//使能APB2的外设时钟GPIO_InitTypeDef GPIO_Initstructure;GPIO_Initstructure.GPIO_Mode GPIO_Mode_Out_PP;//通用推挽输出GPIO_Initstructure.GPIO_Pin GPIO_Pin_5;GPIO_Initstructure.GPIO_Speed GPIO_S…...

SSH远程直连--------------Docker容器

文章目录 1. 下载docker镜像2. 安装ssh服务3. 本地局域网测试4. 安装cpolar5. 配置公网访问地址6. SSH公网远程连接测试7.固定连接公网地址8. SSH固定地址连接测试 在某些特殊需求下,我们想ssh直接远程连接docker 容器,下面我们介绍结合cpolar工具实现ssh远程直接连接docker容器…...

Python/Spring Cloud Alibaba开发--前端复习笔记(1)———— html5和css3.html基础

Python/Spring Cloud Alibaba开发–前端复习笔记&#xff08;1&#xff09;———— html5和css3.html基础 1)概述和基本结构 超文本标记语言。超文本指超链接&#xff0c;标记指的是标签。 基本结构&#xff1a; <!DOCTYPE html> 文档声明 <html lang”en”>…...

open cv学习 (十一)视频处理

视频处理 demo1 import cv2 # 打开笔记本内置摄像头 capture cv2.VideoCapture(0) # 笔记本内置摄像头被打开 while capture.isOpened():# 从摄像头中实时读取视频retval, image capture.read()# 在窗口中实时显示读取到的视频cv2.imshow("Video", image)# 等到用…...

函数栈帧理解

本文是从汇编角度来展示的函数调用&#xff0c;而且是在vs2013下根据调试展开的探究&#xff0c;其它平台在一些指令上会有点不同&#xff0c;指令不多&#xff0c;简单记忆一下即可&#xff0c;在我前些年的学习中&#xff0c;学的这几句汇编指令对我调试找错误起了不小的作用…...

【SA8295P 源码分析】70 - QAM8295P 原理图参考设计 之 DP、eDP 接口硬件原理分析

【SA8295P 源码分析】70 - QAM8295P 原理图参考设计 之 DP、eDP 接口硬件原理分析 一、DP 接口(Display Port)介绍二、高通参考硬件原理图分析2.1 高通 Display 接口框图介绍2.2 DP接口 Pin 定义介绍2.3 高通参考设计:DP2、DP3 硬件原理图2.4 高通参考设计:eDP0、eDP1 硬件…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...

命令行关闭Windows防火墙

命令行关闭Windows防火墙 引言一、防火墙:被低估的"智能安检员"二、优先尝试!90%问题无需关闭防火墙方案1:程序白名单(解决软件误拦截)方案2:开放特定端口(解决网游/开发端口不通)三、命令行极速关闭方案方法一:PowerShell(推荐Win10/11)​方法二:CMD命令…...