element-ui 使用拼音快速查找 pinyin-engine

安装

npm install pinyin-engine --save

API

new PinyinEngine(list, keys)

建立拼音索引。

参数：

1. list {[string]|[Object]} 被索引的目标
2. keys {[string]} 可选。如果 list 为 Object，这里用来设置需要被索引的 key

.query(keyword)

查询匹配拼音的数据。

参数：

1. keyword {string} 拼音或者关键字

返回：

{[string]|{Object}}

繁体中文版本

包含简体中文与繁体中文。

const PinyinEngine = require('pinyin-engine/tw');

使用范例

列表项为字符串：

const PinyinEngine = require('pinyin-engine');

 

// 建立数据索引

const pinyinEngine = new PinyinEngine([

    '清华大学',

    '北京大学',

    '中央美院'

]);

 

// 查询

pinyinEngine.query('daxue'); // ['清华大学', '北京大学']

列表项为对象：

const PinyinEngine = require('pinyin-engine');

 

// 建立数据索引

const pinyinEngine = new PinyinEngine([

    { id: 0, name: '清华大学' },

    { id: 1, name: '北京大学' },

    { id: 3, name: '中央美院' }

], ['name']);

 

// 查询

pinyinEngine.query('daxue'); // ['清华大学', '北京大学']

 

https://www.npmjs.com/package/pinyin-engine

案例

<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline mb0">

          <el-form-item label="科室">

            <el-select v-model="formInline.department" filterable default-first-option 

:filter-method="PinyinMatch" style="120px" placeholder="科室">

              <el-option v-for="item in pinyinOptions" :key="item.value" :label="item.label"

 :value="item.value" />

            </el-select>

          </el-form-item>

        </el-form>

<script>

export default {

  data() {

    return {

      options: [{

        value: '选项1',

        label: '304 医联体'

      }, {

        value: '选项2',

        label: '401 院领导'

      }, {

        value: '选项3',

        label: '402 办公室'

      }, {

        value: '选项4',

        label: '403 财务科'

      }, {

        value: '选项5',

        label: '404 设备科'

      }],

      pinyinOptions: []

    }

  },

  created() {

    this.pinyinOptions = this.options

  },

  methods: {

    onSubmit() {

      console.log('submit')

    },

    PinyinMatch(val) {

      const PinyinEngine = require('pinyin-engine')

      // 建立数据索引

      const pinyinEngine = new PinyinEngine(this.options, ['label'])

      // 查询

      const pinyinVal = pinyinEngine.query(val)

      this.pinyinOptions = pinyinVal

    }

  }

}

</script>