Element-ui Select选择器自定义搜索方法

server/2024/11/17 0:41:12/

效果图

在这里插入图片描述

具体实现

<template><div class="home"><el-selectref="currencySelect"v-model="currency"filterable:spellcheck="false"placeholder="请选择":filter-method="handleCurrencyFilter"@change="handleCurrencyChange"@visible-change="handleCurrencyVisible"style="width: 240px;"><el-optionv-for="(item, index) in currencyOptions":key="index":label="item.label":value="item.label"><span style="float: left">{{ item.label }}</span><spanv-if="item.value !== ''"style="float: right; color: #8492a6; font-size: 13px;margin-left: 15px;">{{ item.nation }}</span></el-option></el-select></div>
</template><script setup>javascript">
import { ref, reactive, computed, onMounted } from "vue"
let currency = ref('')
let currencyOld = ref('')
let flag = ref(false)
const currencySelect = ref(null)
let dataList = reactive([{ label: 'CNY', value: 'CNY', nation: '中国'},{ label: 'USD', value: 'USD', nation: '美国'},{ label: 'EUR', value: 'EUR', nation: '欧盟'},{ label: 'JPY', value: 'JPY', nation: '日本'},{ label: 'GBP', value: 'GBP', nation: '英国'},{ label: 'AUD', value: 'AUD', nation: '澳大利亚'},{ label: 'CHF', value: 'CHF', nation: '瑞士'},{ label: 'CAD', value: 'CAD', nation: '加拿大'},{ label: 'NZD', value: 'NZD', nation: '新西兰'},{ label: 'SGD', value: 'SGD', nation: '新加坡'},{ label: 'HKD', value: 'HKD', nation: '香港'},{ label: 'TWD', value: 'TWD', nation: '台湾'},{ label: 'SEK', value: 'SEK', nation: '瑞典'},{ label: 'DKK', value: 'DKK', nation: '丹麦'},{ label: 'NOK', value: 'NOK', nation: '挪威'},{ label: 'HUF', value: 'H}UF', nation: '匈牙利'},{ label: 'PLN', value: 'PLN', nation: '波兰'},{ label: 'RUB', value: 'RUB', nation: '俄罗斯'},{ label: 'BRL', value: 'BRL', nation: '巴西'},{ label: 'MXN', value: 'MXN', nation: '墨西哥'},{ label: 'ZAR', value: 'ZAR', nation: '南非'},{ label: 'TRY', value: 'TRY', nation: '土耳其'},{ label: 'INR', value: 'INR', nation: '印度'},{ label: 'IDR', value: 'IDR', nation: '印度尼西亚'},{ label: 'MYR', value: 'MYR', nation: '马来西亚'},{ label: 'PHP', value: 'PHP', nation: '菲律宾'},{ label:'THB', value: 'THB', nation: '泰国'},{ label: 'KRW', value: 'KRW', nation: '韩国'},{ label: 'VND', value: 'VND', nation: '越南'},{ label: 'HKD', value: 'HKD', nation: '香港'},{ label: 'KPW', value: 'KPW', nation: '朝鲜'}
])
let currencyOptions = ref([])const getData = () => {currencyOptions.value = dataList
}
// 自定义搜索方法
const handleCurrencyFilter = (query) => {// 如果搜索关键字为空,则恢复搜索前的值currency.value = query ? query : currencyOld.valuecurrencyOptions.value = dataList.filter(v => {return v.label.indexOf(query.toUpperCase()) > -1 || v.nation.indexOf(query) > -1})
}
// 选中值发生变化时触发
const handleCurrencyChange = (val) => {flag.value = truecurrencyOld.value = valcurrencySelect.value.blur()// 延时,避免搜索后下拉列表恢复全量数据时高度闪现setTimeout(() => {currencyOptions.value = [...dataList]}, 150)
}
// 下拉框出现/隐藏时触发
const handleCurrencyVisible = (visible) => {if (!visible) {// 下拉框隐藏时, 如果没有选择新的值则恢复搜索前的值if (!flag.value) currency.value = currencyOld.valuecurrencySelect.value.blur()} else {flag.value = false}
}
onMounted(() => {getData()
})
</script>
<style scoped lang="less">
.home {display: flex;justify-content: center;
}
</style>

http://www.ppmy.cn/server/142509.html

相关文章

刷题统计(C语言)

问题描述 小明决定从下周一开始努力刷题准备蓝桥杯竞赛。他计划周一至周五每天 做 aa 道题目, 周六和周日每天做 bb 道题目。请你帮小明计算, 按照计划他将在 第几天实现做题数大于等于 nn 题? 输入格式 输入一行包含三个整数 a,ba,b 和 nn. 输出格式 输出一个整数代表天…

将 HTML 转换为 JSX:JSX 和 JSX 规则

JSX 是 JavaScript 的语法扩展。您可以在 JavaScript 文件中编写 HTML 格式。 它基于 Web、Html、Css 和 JavaScript。Web 开发人员将页面内容分别编写为 Html 文件&#xff0c;将设计编写为 Css 文件&#xff0c;将逻辑编写为 JavaScript 文件。 须知 &#xff1a; JSX 是一个…

Spring Boot编程训练系统:实战开发技巧

4系统概要设计 4.1概述 本系统采用B/S结构(Browser/Server,浏览器/服务器结构)和基于Web服务两种模式&#xff0c;是一个适用于Internet环境下的模型结构。只要用户能连上Internet,便可以在任何时间、任何地点使用。系统工作原理图如图4-1所示&#xff1a; 图4-1系统工作原理…

C++__day1

1、思维导图 2、如果登录失败&#xff0c;提示用户登录失败信息&#xff0c;并且提示错误几次&#xff0c;且重新输入&#xff1b;如果输入错误三次&#xff0c;则退出系统 #include <iostream> using namespace std;int main() {string id , pswd;string user"admi…

PCA 原理推导

针对高维数据的降维问题&#xff0c;PCA 的基本思路如下&#xff1a;首先将需要降维的数据的各个变量标准化&#xff08;规范化&#xff09;为均值为 0&#xff0c;方差为 1 的数据集&#xff0c;然后对标准化后的数据进行正交变换&#xff0c;将原来的数据转换为若干个线性无关…

JavaWeb笔记整理——Spring Task、WebSocket

目录 SpringTask ​cron表达式 WebSocket SpringTask cron表达式 WebSocket

刘铁猛C#入门 024 类的声明,继承和访问控制

类声明的全貌 C#声明类的位置 声明既定义(C#与Java) 类的修饰符 最简单的类声明 类的访间控制 &#xff1a;默认internal 共性 public 和 internal 都是访问修饰符&#xff0c;用于定义一个类型的成员可以被谁访问。它们都可以用来声明类、结构、接口、枚举、字段、方法、…

webpack案例----pdd(anti-content)

本文章中所有内容仅供学习交流&#xff0c;相关链接做了脱敏处理&#xff0c;若有侵权&#xff0c;请联系我立即删除&#xff01; 目标网址&#xff1a;aHR0cHM6Ly9waW5kdW9kdW8uY29tL2hvbWUvM2M 加密参数&#xff1a;anti_content 载荷里面的rn是不变的 发现加密是anti-con…