博客

先引入Pinyin依赖 具体的npm指令大家自行baidu吧。

import Pinyin from 'jian-pinyin/index'
Vue.prototype.$Pinyin = Pinyin;

使用方法

<u-index-list :scrollTop="scrollTop" @select="selectFn" :offset-top="offsetTop" :index-list="indexList">
	<view v-for="(item, index) in indexList" :key="index" :id="'item'+index">
		<u-index-anchor :index="item" />
		<view class="list-cell" v-for="(item1,index1) in supplierList[item]" :key="index1" @click="backPage(item1)">
			{{item1}}
		</view>
	</view>
</u-index-list>

let origin = []; //初始化一个新的数组来存数据
http.QuserSuppliers(data).then(res => { //调取获取数据的接口
	if (res.data.code == 1) {
		let list = res.data.data;
		_this.supplier = list;
		//默认给第一个值
		list.map((item) => {
			origin.push(item.SupplierName);
		})
		//sort进行汉字排序
		origin = origin.sort((pre,next) => pre.localeCompare(next))
		const newObj ={};
		//const listIndex = [];
		origin.map(item => {
			// 获取汉字的首字母
			let key = _this.$Pinyin.getSpell(item, (char, spell) => {
				return spell[1]
				})[0].toUpperCase()
				// 如果对象中已有key，则push
				if (newObj.hasOwnProperty(key)) {
					newObj[key].push(item)
				} else { // r如果对象中没有这个key，则为这个key构造value，这里value是一个数组
					_this.$set(newObj, key, [item])
					_this.indexList.push(key);
				}
		})
		_this.supplierList = newObj;
		console.log('newObj----------->', newObj)
	}
});