pinyinEngine使用

<el-form-item label="系统名称">

      <el-select

        v-model="searchForm['lngtoproductid']"

        clearable

        filterable

        :filter-method="filterFn"

        placeholder="请选择"

        style="width:200px"

        @focus="focusEvent"

      >

        <el-option

          v-for="item in optionList"

          :key="item.lngproductid"

          :label="item.strproductname"

          :value="item.lngproductid"

        />

      </el-select>

    </el-form-item>

 

<script>

const PinyinEngine = require('pinyin-engine')

export default {

  name: 'ExternalBookSetFilterTool',

  data() {

    return {

      pinyinEngine: null,

      // 下拉框

      optionList: [

      ],

    }

  },

  methods: {

 getStrProductNameFn() {

      getStrProductNameFn(0, 315).then(res => {

        if (res.code === 20000) {

          this.optionList = res.data

          this.pinyinEngine = new PinyinEngine(this.optionList, ['strproductname'])

        }

      })

    },

    filterFn(val) {

      this.optionList = this.pinyinEngine.query(val)

    },

    focusEvent(e) {

      if (!e.target.value) {

        this.optionList = this.pinyinEngine.query('')

      }

    }

  }

}

</script>