最初のレンダリング：
この機能は実際には実装が難しくありません。主に注意が必要な詳細がいくつかあります。
1.vueでのjsモジュールのエクスポート
2.linqの使用
3.一次および二次グループ化のビジネスロジック処理
主な実装手順は次のとおりです。
1つ：linqを準備する
1.linqをインストールします。
npm install linq
2.main.jsでの参照
import linq from 'linq';
Vue.prototype.Enumerable=linq;
3.linqの理解。個人的には、Java8のストリーム操作に似ていると思います。
要約をお勧めします：https：//blog.csdn.net/jsjpanxiaoyu/article/details/76560182
2：テンプレートページ
<el-form-item v-if="editDailogFormType=='region'" label="需求省份" prop="channelName">
<el-select v-model="regionConfigForm.citys" placeholder="请选择区域"
multiple
filterable
remote
reserve-keyword
:remote-method="(queryString)=>{remoteMethod(queryString);}"
style="width: 100%;">
<el-option-group
v-for="group in multipleSelectOption"
:key="group.province"
:label="group.province"
@click.native="checkProvince(group.province)">
<el-option
v-for="item in group.city"
:key="item.value"
:label="item.city_name"
:value="item.city_name">
</el-option>
</el-option-group>
</el-select>
</el-form-item>
el-selectドロップダウンボックスのこれらの属性を過剰に説明する
multipe：複数選択を開く
フィルタリング可能：検索を開く
リモート：リモート検索を開く
予約語：キーワード
：リモート方式：リモート検索トリガーの方式。
el-selectの下のel-option-groupはグループ名（州など）であり、el-optionはグループの下の特定のオプション（都市など）です。
@ click.nativeは、グループ名がクリックされたときにトリガーされるメソッドです。
三：
1.jsonデータの準備。私のjson形式は[{province：xxx、city：[{city_name：xxx}]}]です。以下はリンクです。必要に応じてダウンロードできます。
https://download.csdn.net/download/nienianzhi1744/12084829
都道府県は静的リソースなので、jsonファイルを作成できます。動的リソースの場合は、バックグラウンドインターフェイスをリクエストしてバックグラウンドからデータを取得できます。
2.拼音関連のjs。
一般的に使用されるjsメソッドを以下に示します。注意してください。以下のコードのpinyinグローバル変数は1つのpinyinのみを定義していることに気付くかもしれません。この拼音変数はjson形式の文字列であり、長すぎてスペースを取りすぎて読み取りに影響します。ダウンロードに入れて、必要に応じてダウンロードできます。
https://download.csdn.net/download/nienianzhi1744/12084844
漢字の拼音への変換、最初の呪文の抽出、漢字の比較と包含の方法、ピン全体、および最初のピンが含まれています。
特定の操作：pinYinForVueという名前のjsファイルを作成します。次のコンテンツをコピーします
export const pinyin = {
'a': '\u554a\u963f\u9515',
}
export default {
arraySearch: function (l1, l2) {
for (let name in pinyin) {
if (pinyin[name].indexOf(l1) !== -1) {
return this.ucfirst(name)
}
}
return false
},
ucfirst: function (l1) {
if (l1.length > 0) {
let first = l1.substr(0, 1).toUpperCase();
let spare = l1.substr(1, l1.length);
return first + spare
}
},
/*获取首字母*/
getInitials: function (text) {
let pinyin="";
for (let i = 0; i < text.length; i++) {
pinyin=pinyin+this.convertToPinYin(text[i])[0];
}
return pinyin; //若取拼音，则返回 pinyin
},
/*判断text中是否包含key，通过汉字、拼音、首拼判断*/
wordInclude:function (text,key) {
if(this.convertToPinYin(text).toLowerCase().indexOf(key) != -1||//全拼是否包含
this.convertToPinYin(text).indexOf(key) != -1 ||//全拼转小写是否包含
this.getInitials(text).toLowerCase().indexOf(key) != -1||//首拼是否包含
this.getInitials(text).indexOf(key) != -1 ||//首拼转小写是否包含
text.indexOf(key) != -1 //汉字是否包含
){
return true;
}else{
return false;
}
},
/*这个转拼音的方法可以单独拿出去用（更灵活），也可以在下方的wordInclude中被调用*/
convertToPinYin: function (l1) {
let l2 = l1.length;
let I1 = '';
let reg = new RegExp('[a-zA-Z0-9]');
for (let i = 0; i < l2; i++) {
let val = l1.substr(i, 1);
let name = this.arraySearch(val, pinyin);
if (reg.test(val)) {
I1 += val
} else if (name !== false) {
I1 += name
}
}
I1 = I1.replace(/ /g, '-');
while (I1.indexOf('--') > 0) {
I1 = I1.replace('--', '-')
}
return I1
},
} 3.電話する
这个注释是我写的最详细的一次import pinyin from '../../utils/pinYinForVue'
import cityjson from '../../assets/city'
export default {
data(){
return {
regionConfigForm:{
citys:[]
}
multipleSelectOption:cityjson,
}
},
methods: {
remoteMethod(queryString) {
/*json中的一级分组是省份，二级分组是城市*/
this.multipleSelectOption=cityjson;
/*去掉重复key，linq中的distinct，where，select 类似Java8的stream流操作*/
this.multipleSelectOption=this.Enumerable.from(this.multipleSelectOption).distinct("o=>o.province").toArray();
/*遍历所有省份数据，根据输入框中的值对所有的一级分组过滤，保留符合条件的数据再重新组装成list*/
let parentSearchList=this.Enumerable.from(this.multipleSelectOption).where((data)=>{
let jsonHasQueryString=false;
/*如果省份的汉字、全拼、首拼是否包含输入的值*/
if(pinyin.wordInclude(data.province,queryString)){
jsonHasQueryString=true;
}
return jsonHasQueryString;
}).toArray();
let childSearchList=[];
/*遍历所有城市数据，根据json数据结构先遍历省份，再遍历省份下城市。*/
for(let i=0;i<this.multipleSelectOption.length;i++){
let parentItem=this.multipleSelectOption[i];
for(let j=0;j<parentItem.city.length;j++){
let childName=parentItem.city[j].city_name;
/*如果城市的汉字、全拼、首拼是否包含输入的值*/
if(pinyin.wordInclude(childName,queryString)){
childSearchList.push({province:parentItem.province,city:[{city_name:childName}]});
}
}
}
/*合并一级分组和二级分组的值，比如 输入 “hb”，
会出现一级分组“河北”及下属的多个二级城市，也会出现 单独的二级分组“淮北”以及所属的一级省份“安徽”*/
let nowmultipleSelectOption =parentSearchList.concat(childSearchList);
/*去掉key相同的重复数据，key相同虽然不影响使用，但控制台会报红*/
this.multipleSelectOption = this.Enumerable.from(nowmultipleSelectOption).distinct("o=>o.province").toArray();
},
/*一级分组名点击全选*/
checkProvince(province){
/*定义一个临时数组*/
let addProvinceCitys= [];
/*这个for循环是为了实现点击一级分组全部勾选的功能*/
for(let i=0;i<cityjson.length;i++){
/*遍历所有省份*/
let parentItem=cityjson[i];
if(parentItem.province==province){
/*若省份能跟此次点击的省份匹配，遍历城市*/
for(let j=0;j<parentItem.city.length;j++){
/*获取已选中元素中是否包含 此次省份下的城市，如果不包含则添加到临时数组中*/
let childName=parentItem.city[j].city_name;
let index=this.regionConfigForm.citys.indexOf(childName);
if(index==-1){
addProvinceCitys.push(childName);
}
}
}
}
/*其实还想做一个反选功能的，但思路暂时还没捋顺，以后再补充*/
/*将临时数组中合并到下拉框的已选择数组中，即可完成赋值选中*/
this.regionConfigForm.citys = this.regionConfigForm.citys.concat(addProvinceCitys);
},
}
}以上。
明けましておめでとうございます