vue pinyin-match下拉框设置拼音模糊搜索

<el-form-item label="姓名：" prop="substation">
   <el-select
     v-model="formInline.substation"
     placeholder="全部"
     filterable
     value-key="id"
     :filter-method="pinyingSub"
     clearable
     @clear="clearSub"
     @change="getOrderLists"
   >
     <el-option
       v-for="item in subArr"
       :key="item.id"
       :label="item.stationName"
       :value="item"
     ></el-option>
   </el-select>
 </el-form-item>

import PinyinMatch from "pinyin-match";
// 封装
import {pinyingSubs} from '../../utils/PinyinMatch'
export default {
  name: 'Dashboard',
  data() {
    return {
      formInline: {
        sign: '',
        dataState: '',
        dataEnd: '',
        substation: '',
        principal: ''
      },
      form: {},
      tableData: [],
      subArr: [],
      copySub: [],
   }
},
mounted(){
	getUser({
      teamId: '1'
    })
      .then((res) => {
        this.subArr = res.data
        this.copySub = this.subArr
      })
      .catch((err) => {
        console.log(err)
      })
},
methods: {
	// 下拉框设置拼音模糊搜索
    pinyingSub(val) {
      // 封装调用
      // let _this = this
      // this.subArr = pinyingSubs(val,_this.subArr,_this.copySub)
      
      if (val) {
        this.subArr = this.copySub.filter((item) => {
          if (item.stationName) {
            if (item.stationName.toUpperCase().indexOf(val.toUpperCase()) != -1) {
              return true
            }
            return PinyinMatch.match(item.stationName, val)
          }
        })
      } else {
        this.subArr = this.copySub
      }
    }
}

PinyinMatch.js

import PinyinMatch from "pinyin-match";
export function pinyingSubs(val,arr,copy) {
  if (val) {
   return arr = copy.filter((item) => {
      if (item.stationName) {
        if (item.stationName.toUpperCase().indexOf(val.toUpperCase()) != -1) {
          return true;
        }
        return PinyinMatch.match(item.stationName, val);
      }
    });
  } else {
    return arr = copy;
  }
}