使用ElementUI实现拼音搜索

最新推荐文章于 2024-06-29 14:25:39 发布

林州错题集

最新推荐文章于 2024-06-29 14:25:39 发布

阅读量377

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/YangYangDeYi8065/article/details/133340936

版权

文章介绍了在Vue项目中，如何使用el-select组件结合pinyin-match库实现实时省份筛选，解决输入框多次点击后数据不刷新的问题，通过`pinyinMatch`方法进行拼音搜索并用`focusFnP`方法处理焦点事件恢复原始数据。

摘要由CSDN通过智能技术生成

话不多说，直接先上代码

      <el-form-item label="省份" v-show="!isSe" prop="province">
        <el-select v-model="queryParams.province" :filter-method="pinyinMatch" placeholder="请选择省份">
          <el-option
            v-for="item in optionsProvince"
            :key="item"
             @focus="focusFnP"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>

   import pinyin from 'pinyin-match'  //  需要引入这个

  data() {
    return {
optionsProvince: [], // 获取省份
 originProvince: [], // 原始省份
    };
  },


 pinyinMatch (val) {
      this.copyDept = this.firstList
      if (val) {
        let result = [] // 声明一个空数组保存搜索内容
        this.copyDept.forEach(e => { // 循环判断内容和拼音首字母是否匹配
          let m = pinyin.match(e, val)
          if (m) {
            result.push(e)
          }
        })
        this.source = result // 返回匹配的数组
      } else {
        this.source = this.copyDept // 未输入返回开始copy的原数组
      }
    },

focusFnP() {
      this.optionsProvince = this.originProvince
    },

这里是在vue中实现的，有需要的可以参考一下

思路：在一个输入框输入一些数据，然后可以在输入框的下面进行过滤，最终通过点击确认。

pinyinMatch方法是拼音搜索的主要功能，会做一次过滤，这个时候其实已经可以了，但是有一个问题，当你再次点击输入框的时候，会出现数据不能返回所有的数据。

因此另一个关键的方法出现了focusFnP方法通过@focus="focusFnP"绑定，当鼠标触发该事件的时候，把输入框下面的数据变成原始数据。