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

解决:el-select可输入时失焦会失去输入框中值

1、展示部分

<template><el-select v-model="addForm.companyName" filterable placeholder="请输入/选择公司名称" :loading="loading":filter-method="(value) => dataFilter(value)" @change="selectCompany"><el-option v-for="item in companys" :key="item.id" :label="item.name" :value="item.id" /><template #loading><el-icon class="is-loading"><svg class="circular" viewBox="0 0 20 20"><g class="path2 loading-path" stroke-width="0" style="animation: none; stroke: none"><circle r="3.375" class="dot1" rx="0" ry="0" /><circle r="3.375" class="dot2" rx="0" ry="0" /><circle r="3.375" class="dot4" rx="0" ry="0" /><circle r="3.375" class="dot3" rx="0" ry="0" /></g></svg></el-icon></template></el-select>
</template>

2.功能

<script setup>
import { onMounted, reactive, ref } from 'vue';
// 公司列表
const companys = reactive([])
const companylists= reactive([])
// loading状态
const loading = ref(false)
// 公司名称
const companyName = ref('')
// 筛选公司条件
const dataFilter = (query) => {if (query) {companyName.value = query;loading.value = truesetTimeout(() => {loading.value = false;companys= companylists.filter(item => item.name.includes(query)).slice(0, 10);}, 30)} else {companys.companys = []}
}
// 改变时修改
const selectCompany = (value) => {// value
}
</script>
http://www.lryc.cn/news/508868.html

相关文章:

  • ollama-webui - Ollama的ChatGPT 风格的 Web 界面
  • 「下载」智慧产业园区-数字孪生建设解决方案:重构产业全景图,打造虚实结合的园区数字化底座
  • 使用Grafana中按钮插件实现收发HTTP请求
  • 【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容
  • Elasticsearch介绍及安装部署
  • 物理层知识要点
  • SpringBoot 自动装配原理及源码解析
  • Craft CMS 模板注入导致 Rce漏洞复现(CVE-2024-56145)(附脚本)
  • Next.js 新手容易犯的错误 _ 加载与缓存管理的关键(5)
  • /etc/fstab 文件学习systemd与该文件关系
  • 从源码分析swift GCD_DispatchGroup
  • 25计软新增考研院校!或可捡漏上岸!
  • C# 线程安全集合
  • 箱包发霉怎么处理 箱包发霉处理修复方法
  • 【每日学点鸿蒙知识】Charles抓包、lock文件处理、WebView组件、NFC相关、CallMethod失败等
  • 【异常】GL-SFT1200路由器中继模式,TL-CPE1300D无法搜寻5G网问题分析
  • LINUX--shell
  • TCP常见问题
  • OpenCV学习——图像融合
  • 网速、续航双在线!2024随身WiFi品牌精选推荐!格行按键切三网值得买吗?
  • ubuntu18.04连接不上网络问题
  • 访谈积鼎科技总经理:国产CFD软件发展与未来趋势展望
  • 【Linux知识】exec命令行详解
  • 【学术小白的学习之路】基于情感词典的中文句子情感分析(代码词典获取在结尾)
  • Linux 中 grep、sed、awk 命令
  • 一起考高项啊--现代化基础设施(工业互联网)
  • python学opencv|读取图像(二十)使用cv2.circle()绘制圆形进阶
  • 期权懂|如何减小个股期权交易中的风险?
  • ubuntu20.04 wget下载--段错误 (核心已转储)
  • 怎么样保持mysql和redis数据一致性