100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > elementUI Cascader 级联选择器 拼音模糊搜索

elementUI Cascader 级联选择器 拼音模糊搜索

时间:2022-05-08 04:02:54

相关推荐

elementUI Cascader 级联选择器 拼音模糊搜索

项目场景:

我领导说他大BOSS想要可以拼音搜索,然后我就去百度百度百度…

只是elementUI级联选择器的拼音模糊搜索,可以作为普通输入框模糊搜索的借鉴…


实现步骤:

1、下载依赖:

可以在VScode打开项目的终端里执行这行语句,或者在项目文件夹的cmd里…

这依赖好像是某个大佬写的,大佬niubility!

npm install pinyin-match --save


2、使用方法(大致结构):

方法是 挂载到全局 还是作为 私有方法 看你自身了.

配合filter-method自定义搜索逻辑使用.

<template>//方法直接挂上去就可以了,参数他自动获取的,不用输入<el-cascaderfilterable:filter-method="PinYinScreen"></el-cascader></template><script>import PinYinMatch from 'pinyin-match'; //下载了依赖,直接复制这行就可以data() {return {}},methods: {PinYinScreen(node, keyword) {//node: 节点node(有多少个选项就有多少个node)//keyword: 输入的搜索关键字//类似for循环,此方法会执行多次//返回布尔值表示是否命中//此判断为初始判断,就是正常的输入搜索逻辑if(!!~node.text.indexOf(keyword) || !!~node.text.toUpperCase().indexOf(keyword.toUpperCase())) {return true}//此判断作为拼音模糊搜索判断//匹配失败时,PinYinMatch.match()返回的是false,//匹配成功时,PinYinMatch.match()返回的是数组,//例如:match("曾经沧海", "canghai"),返回[2,3],也就是字符串出现的区间if(PinYinMatch.match(node.label, keyword)) {return true}},}</script>


END.

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。