在这里我们用到一个js方法 data_letter_sort  首字符姓氏分组 
<template>
	<view>
		<u-index-list :scrollTop="scrollTop" >
			<view v-for="(item, index) in indexList" :key="index">
				<u-index-anchor :index="item.name" />
				<view class="list-cell" v-for="(i,num) in item.list" :key="num">
					{{i.userName}}
				</view>
			</view>
		</u-index-list>
	</view>
</template>

<script>
	import { findAllTeamAndTeacher} from '../../api/teacher.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				indexList: [
					{
						name:'A',
						list:[]
					},
					{
						name:'B',
						list:[]
					},
					{
						name:'C',
						list:[]
					},
					{
						name:'D',
						list:[]
					},
					{
						name:'E',
						list:[]
					},
					{
						name:'F',
						list:[]
					},
					{
						name:'G',
						list:[]
					},
					{
						name:'H',
						list:[]
					},
					{
						name:'I',
						list:[]
					},
					{
						name:'J',
						list:[]
					},
					{
						name:'K',
						list:[]
					},
					{
						name:'L',
						list:[]
					},
					{
						name:'M',
						list:[]
					},
					{
						name:'N',
						list:[]
					},
					{
						name:'O',
						list:[]
					},
					{
						name:'P',
						list:[]
					},
					{
						name:'Q',
						list:[]
					},
					{
						name:'R',
						list:[]
					},
					{
						name:'S',
						list:[]
					},
					{
						name:'T',
						list:[]
					},
					{
						name:'U',
						list:[]
					},
					{
						name:'V',
						list:[]
					},
					{
						name:'W',
						list:[]
					},
					{
						name:'X',
						list:[]
					},
					{
						name:'Y',
						list:[]
					},
					{
						name:'Z',
						list:[]
					},
				],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			data_letter_sort (data, field) {
			    var letter_reg = /^[A-Z]$/;
			    var list = new Array();
				var letter
			    for (var i = 0; i < data.length; i++) {
			        // 添加 # 分组,用来 存放 首字母不能 转为 大写英文的 数据
			        list['#'] = new Array();
			        // 首字母 转 大写英文
			        letter = (data[i][field]).substr(0, 1).toUpperCase();
			        // 是否 大写 英文 字母
			        if (!letter_reg.test(letter)) {
			            letter = '#';
			        }
			        // 创建 字母 分组
			        if (!(letter in list)) {
			            list[letter] = new Array();
			        }
			        // 字母 分组 添加 数据
					
			        list[letter].push(data[i]);
			    }
			    // 转换 格式 进行 排序;
			    var resault = new Array();
			    for (var key in list) {
			        resault.push({
			            letter: key,
			            list: list[key]
			        });
			    }
			    resault.sort(function (x, y) {
			        return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
			    });
			    // # 号分组 放最后
			    var last_arr = resault[0];
			    resault.splice(0, 1);
			    resault.push(last_arr);
			 
			    // 转换 数据 格式
			    var json_sort = {}
			    for (var i = 0; i < resault.length; i++) {
			        json_sort[resault[i].letter] = resault[i].list;
			    }
			 
			    return json_sort;
			},
			findAllTeamAndTeacher(){
				findAllTeamAndTeacher().then(res=>{
					console.log(res)
					var resault = this.data_letter_sort(res.data, 'userNameIndex');
					
					console.log(resault)
					for(let i=0;i<this.indexList.length;i++){
						for(let key in resault){
							if(key == this.indexList[i].name){
								
								this.indexList[i].list=resault[key]
							}
						}
					}
					console.log(this.indexList)
				})
			},
			
		},
		onShow(){
			this.findAllTeamAndTeacher()
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐