国家根据首字母按英文排序

首先安装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
他这里还有些搜索。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 8,145评论 1 3
  • 1-------- 走进前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥阅读 6,859评论 0 34
  • 请允许我借鉴前辈们的东西~~~~ 感激不尽~~~~~ 以下为Android 框架排行榜 么么哒~ Android...
    嗯_新阅读 6,646评论 3 32
  • 按照这篇文章创建一个Android项目; native方法 生成头文件: 实现jni方法; https://git...
    张俊峰0613阅读 8,416评论 0 4
  • 2017年8月,我即将开始第25个正面管教普及班的旅程。回首,2015年春至2017年夏,独立讲师2年半的时间,线...
    Polly的心灵时空阅读 3,873评论 0 1