在使用 Element-UI Select 組件時，遇到一個需求是根據漢字或漢字拼音來過濾選項，記錄一下解決方案。

這里需要使用 Element-UI Select 組件的 filter-method 和 filterable屬性。

另外需要使用 js 拼音庫 CnChar ，這個庫主要就是做漢字轉拼音和漢字筆畫數的。使用 npm i cnchar 就可以安裝使用啦，詳細的使用 CnChar 文檔里有介紹。

需求大概是這樣的：漢字匹配就不用多說了，拼音匹配有個要求，就是只能從某個漢字的拼音開始匹配，不能截斷，比如說：雙皮奶 不能被 huangpinai 匹配，但是可以被 pinai 匹配。

實現(xiàn)思路就是在 filter-method 中使用數組的filter方法對源數據進行過濾就可以，過濾方法使用 CnChar 提供的 .spell方法可以獲取拼音數組。

其實也比較簡單，我就直接上代碼啦，注釋寫的比較完整，就不過多解釋啦，有不理解的地方可以留言哈：

<template>
    <div>
        <el-select v-model="value" :filter-method="filter" filterable placeholder="請選擇">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
        </el-select>
    </div>
</template>

<script>
    import cnchar from "cnchar";
    export default {
        data() {
            return {
                copy: [],
                options: [
                    {
                        value: "選項1",
                        label: "黃金糕"
                    },
                    {
                        value: "選項2",
                        label: "雙皮奶"
                    },
                    {
                        value: "選項3",
                        label: "先生"
                    },
                    {
                        value: "選項4",
                        label: "西安城"
                    },
                    {
                        value: "選項5",
                        label: "松下電器"
                    },
                    {
                        value: "選項6",
                        label: "學習成果"
                    }
                ],
                value: ""
            };
        },
        mounted() {
            //保留數據源
            this.copy = Object.assign(this.options);
        },
        methods: {
            filter(v) {
                //對綁定數據賦值
                this.options = this.copy.filter((item) => {
                    //如果直接包含輸入值直接返回true
                    if (item.label.indexOf(v) !== -1) return true;

                    //將label拆散成小寫拼音數組
                    let arr = item.label.spell('low', 'array');
                    //拼接成完整label的拼音
                    let spell = arr.join('');
                    //lengths 是label完整拼音 中每個漢字第一個拼音字母的index值的數組
                    let lengths = [0];
                    for (var i = 0; i < arr.length - 1; i++) {
                        lengths.push(lengths[i] + arr[i].length);
                    };
                    //判斷l(xiāng)abel完整拼音 中 輸入值的 index 是不是等于某個漢字第一個拼音字母的index值
                    return lengths.indexOf(spell.indexOf(v)) !== -1;
                })
            }
        }
    };
</script>

image.gif