首先安装npm pingyin
来自https://github.com/hotoo/pinyin
然后引入到页面
//你返回的数据是正常数组即可[{name:'‘中国’,key:'2'}]
//处理之后的数据格式为list[citylist:[name:'',key:''],letter:"A']
//不过这样出来的话有些字母居然带着声调这就导致带声调的字母被排除了,并没有加进//去,我没有找到怎么安装不带声调的版本或者配置,于是强行判断修改了带声调的字母
import pinyin from 'pinyin';
var letter=[],showCityTemp=[],showCity=[];
mounted(){
var that=this;
var params={}
searchMessage(params,function(res){//你的请求接口,我这里是国家列表
var data=res.result.data;
that.buildItem(data);//调用排序
that.conutry_list=letter;赋值
},function(err){
});},
methods:{
getFirstLetter: function (str) { // 得到城市第一个字的首字母
return pinyin(str)[0][0].charAt(0).toUpperCase()
},
buildLetter: function () { // 构建字母项
letter = []
for (let i = 0; i < 26; i++) {
let obj = {}
obj.letter = String.fromCharCode((65 + i))
obj.citylist = []
letter.push(obj)
}
},
buildItem: function (cityNamesFilter) { // 构建城市
this.buildLetter()
let _this = this
for (let i = 0; i < 26; i++) {
letter[i].citylist = []
}
for (let i = 0; i < cityNamesFilter.length; i++) {
console.log(cityNamesFilter[i].caption);
var f=_this.getFirstLetter(cityNamesFilter[i].caption);
if(f=='Ā'||f=='À'){
f='A'
}
if(f=='Ē'||f=='È'){
f='E'
}
let _index = Number(f.charCodeAt() - 65);
console.log(_this.getFirstLetter(cityNamesFilter[i].caption));//返回每个首字的首字母
if (_index >= 0 && _index < 26) {
letter[_index].citylist.push(cityNamesFilter[i])
}
}
// 如果letter中citylist中没有值的话,过滤这一项
showCity = showCityTemp = letter.filter(function (value) {
let len = value.citylist.length
return len > 0
})
},
}
参考的文章https://www.cnblogs.com/star-wind/p/6913002.html
他这里还有些搜索。
网友评论