npm install pinyin-pro

import { pinyin } from 'pinyin-pro';

// 雙向綁定搜索框,由用戶輸入的數(shù)據(jù)
inputProvince: 'ninxia',

// 從后臺獲取的，篩選前的總數(shù)據(jù)
totalProvinceList: [
{ province: '寧夏省'，id：'0001', turnover: '50' },
.....
],

// 由inputProvince從totalProvence中篩選后的數(shù)據(jù)，雙向綁定列表
provinceList: [],

// 輸入框搜索有關(guān)方法

    pinyinFilter (inputValue, totalList) { // 工具類方法，從數(shù)組中過濾出漢字、拼音、拼音首字母相同的項
      /* 輸入內(nèi)容拼音轉(zhuǎn)換 */
      // 完整拼音
      const pyInput = pinyin(inputValue, { toneType: 'none', type: 'array' }).join('')
      console.log('pyInput', pyInput)

      // 拼音首字母
      const headerPyInput = pinyin(inputValue, { pattern: 'first', type: 'array' }).join('')
      console.log('headerPyInput', headerPyInput)

      return totalList.filter(e => {
        // 列表中每項的拼音
        const pyE = pinyin(e.province, { toneType: 'none', type: 'array' }).join('').slice(0, pyInput.length)
        console.log('pyE', pyE)

        // 列表中每項的拼音首字母
        const headerPyE = pinyin(e.province, { pattern: 'first', type: 'array' }).join('').slice(0, headerPyInput.length)
        console.log('headerPyE', headerPyE)
        console.log('_____________________')

        // 過濾匹配
        return e.province.includes(inputValue) || (pyE === pyInput) || (headerPyE === headerPyInput)
      })
    },

this.provinceList = this.pinyinFilter(this.inputProvince, this.totalProvinceList)