项目场景：

我领导说他大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.

elementUI Cascader 级联选择器拼音模糊搜索相关推荐

element-ui cascader 级联选择器存最后一级id及回显
:props="{emitPath:false}" 加上这行就可以,只存最后一级id,且以最后一级id完整回显. <el-cascader expand-trigger=&q ...
elementUI样式修改（Cascader 级联选择器）
elementui的问世,大大提高了前端开发的工作效率,但同时也带给我们不少烦恼.我们要用UI组件就免不了要对它做一些个性化定制需求,所以我们就必须要覆盖element的一些样式下面是我开发中遇到 ...
Cascader 级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择. 基础用法有两种触发子菜单的方式只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器. 通过expa ...
Element的Cascader 级联选择器禁用和回显问题
今日,在vue项目中使用饿了么的Cascader级联选择器时,遇到了一个问题,情景时这样的, 数据是从后台拿到的,前端要做出的效果是当满足某些条件时,某些选项禁止选中.花了很长时间解决这个问题,于是写 ...
Cascader 级联选择器如何根据给定的叶节点值设置默认值（数据回显）
转载自:Cascader 级联选择器如何设置默认值(数据回显)_༺举个栗子吧༻的博客-CSDN博客_选择器设置默认值官网cascader:https://element.eleme.cn/#/zh- ...
Cascader 级联选择器、Select 选择器和date-picker日期选择器的宽度设置
像select选择器的宽度设置一般是这样 <el-select v-model="value" placeholder="请选择" style=" ...
vue中级联选择器回填_浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述使用Cascader级联选择器过程中主要存在的应用问 ...
Element-UI中Cascader 级联选择器使用
Element-UI的级联组件官方文档 <el-cascaderv-model="value":options="options":props=" ...
element-ui中Cascader 级联选择器组件使用(默认选择是value(id)，还想要获取label(name值))
我的需求是一个下拉框选中城市(先选中省-对应市显示-选中显示在下拉框中)注:区不要但是我之前封装了一个三级联动的,所以我需要重新封装一个: cityMap.js const map = {11000 ...
解决cascader级联选择器报错“level“ of null
1. 需求:级联选择器数据与另一文本框有联系,如果文本框有值,则相同的值在cascader的数据中置灰,不可选.如果先选择了cascader的值,再填文本框的值发现两选值相同,则将cascader的选 ...

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

项目场景：

实现步骤：

1、下载依赖：

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

END.

elementUI Cascader 级联选择器拼音模糊搜索相关推荐

最新文章

热门文章

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

项目场景：

实现步骤：

1、下载依赖：

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

END.

elementUI Cascader 级联选择器 拼音模糊搜索相关推荐

最新文章

热门文章

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

elementUI Cascader 级联选择器拼音模糊搜索相关推荐