Element-UI Selectドロップ枠は、漢字ピンインフィルタリングによる選択オプション(filter-methodを使用して、filterable属性)です.
2791 ワード
Element-UI Selectコンポーネントを使う時、漢字またはピンインによってオプションをフィルタリングして解決策を記録する必要があります.
ここでは、Element-UI Selectコンポーネントを使用する必要があります. filter-methodと filterable属性です
また、jsピンインを使う必要があります. Cn Char ,この倉庫は主に漢字のピンインと漢字の画数を回転するのです.使用 npm i cncharはインストールして使うことができます.詳しく使います. Cn Char 文書に紹介があります.
需要は大体このようです.漢字のマッチングは言うまでもなく、ピンインのマッチングには要求があります.ある漢字のピンインからしかマッチングできません.
構想を実現するのは filter-methodでは配列のfilter法を使ってソースデータをフィルタリングすればいいです.フィルタリング方法は使えます. Cn Char spell法はピンイン配列を得ることができる.
実は簡単です.直接コードをつけます.コメントのほうが完璧です.ただ多く説明します.理解できないところがあれば、メッセージを残してもいいです.
ここでは、Element-UI Selectコンポーネントを使用する必要があります. filter-methodと filterable属性です
また、jsピンインを使う必要があります. Cn Char ,この倉庫は主に漢字のピンインと漢字の画数を回転するのです.使用 npm i cncharはインストールして使うことができます.詳しく使います. Cn Char 文書に紹介があります.
需要は大体このようです.漢字のマッチングは言うまでもなく、ピンインのマッチングには要求があります.ある漢字のピンインからしかマッチングできません.
構想を実現するのは filter-methodでは配列のfilter法を使ってソースデータをフィルタリングすればいいです.フィルタリング方法は使えます. Cn Char spell法はピンイン配列を得ることができる.
実は簡単です.直接コードをつけます.コメントのほうが完璧です.ただ多く説明します.理解できないところがあれば、メッセージを残してもいいです.
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);
};
// label index index
return lengths.indexOf(spell.indexOf(v)) !== -1;
})
}
}
};