安装pinyin-match
// 安装 pinyin-match
npm install pinyin-match --save
引入
import PinyinMatch from 'pinyin-match'
ele 下拉框
<el-select filterable :filter-method="handleFilter">
? ? ? ? ? ? ? ? ? ? ? <el-option
? ? ? ? ? ? ? ? ? ? ? ? v-for="item in orderDetails"
? ? ? ? ? ? ? ? ? ? ? ? :key="item.id"
? ? ? ? ? ? ? ? ? ? ? ? :label="item.codeName"
? ? ? ? ? ? ? ? ? ? ? ? :value="item.id"
? ? ? ? ? ? ? ? ? ? ? ></el-option>
? ? ? ? ? ? ? ? ? ? </el-select>
拼音和输入数值过滤
注意：
// 复制
this.copyOrderDetails = Object.assign(this.orderDetails)
handleFilter(val) {
? ? ? // 对绑定数据赋值
? ? ? if (val) {
? ? ? ? this.orderDetails = this.copyOrderDetails.filter((item) => {
? ? ? ? ? // 如果直接包含输入值直接返回true
? ? ? ? ? if (item.codeName) {
? ? ? ? ? ? if (item.codeName.toUpperCase().indexOf(val.toUpperCase()) != -1) {
? ? ? ? ? ? ? return true
? ? ? ? ? ? }
? ? ? ? ? ? // 输入值拼音d
? ? ? ? ? ? return PinyinMatch.match(item.codeName, val)
? ? ? ? ? }
? ? ? ? })
? ? ? } else {
? ? ? ? this.orderDetails = this.copyOrderDetails
? ? ? }
? ? }
————————————————
? ? ? ? ? ? ? ? ? ? ? ? ? ? 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/wjx_jasin/article/details/109681147