实现按汉字拼音首字母分组排序

html:

 <van-index-bar class="controls" :sticky="false" :index-list="indexList" :sticky-offset-top="100">
   <template v-for="control in showControls" >
       <van-index-anchor :index="control.letter" :key="control.letter" >{{control.letter}}</van-index-anchor>
        <van-cell class="cell" :title="area.cn_name" v-for="area in control.data" :key="area.letter"/>
    </template>
 </van-index-bar>

js:

data(){
  	return{
       	controls:[], //所有布控点
        showControls:[], //展示的布控点
        indexList:[],//右侧索引
    }
},
created(){
 	this.getProject(3);
},
methods:{
	//获取数据
	getProject(projectId){
            // 获取项目布控点和围栏数据
            this.$Axios.post(url,qs.stringify({
                        id:projectId,
                        t: Date.parse(new Date())
                    })).then(res=>{
                        if(res.data.status == 1){
                            let project = res.data.project;
                            console.log("监控点和围栏数据："); 
                            console.log(project);  
                            this.controls = this.cnNameSort(project.areas);
                            this.showControls = this.controls;
                            let _this = this;
                            this.showControls.forEach(control=>{
                                _this.indexList.push(control.letter);
                            })
                            console.log(this.controls);                                             
                        }
                        if(res.data.status == 0){
                            console.log("返回数据失败");
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
    },
    //按汉字拼音首字母分组排序                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
	cnNameSort(arr) {
            if(!String.prototype.localeCompare)
                return null;
            
            var letters = "#ABCDEFGHJKLMNOPQRSTWXYZ".split('');
            var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('');
            
            var segs = [];
            var curr;
            letters.forEach(function(item,i){
                curr = {letter: item, data:[]};
                arr.forEach(function(item2){
                    if((!zh[i-1] || zh[i-1].localeCompare(item2.cn_name.trim()) <= 0) && item2.cn_name.trim().localeCompare(zh[i]) == -1) {
                        curr.data.push(item2);
                    }
                });
                if(curr.data.length) {
                    segs.push(curr);
                    curr.data.sort(function(a,b){
                        return a.cn_name.trim().localeCompare(b);
                    });
                }
            });
            return segs;
        },
}

后台数据：

最终页面效果：

参考：https://blog.csdn.net/lzrit/article/details/90600894