前段时间做了一个基于mint ui 的联系人列表,写了一个我认为是平民写法的 数据操作(因为后台不给我我想要的格式,我得自己去处理),先来看一下效果图
内容是人头像,姓名,所属公司。
内容代码:
<mt-index-list>
<mt-index-section v-for="(item, index) in letters" :key="index" :index="item.tits">
<search-content :data="item.items"></search-content>
</mt-index-section>
</mt-index-list>
searchContent 是人物的组件
后台给我传过来的值为下面这种格式
一条是一个人的信息我需要,把这些处理成我需要的格式 来附给我遍历的数组
下面代码是接收到数据 后的处理
// 获取联系人列表
getList () {
getPeople().then(({ data }) => {
this.listPeople = data.data
this.letters = this._sortData(this.formatList(this.listPeople, 'letter'))
})
},
// 排序
_sortData (data) {
for (let i = 0, len = data.length; i < len; i++) {
data[i].items = (data[i].items || []).sort((a, b) => {
return a.name.charAt().charCodeAt() - b.name.charAt().charCodeAt()
})
}
return data
},
// 数据处理函数
formatList (arr, letter) {
let newArr1 = []// 转换成功后的数据存储的地方
// 保存整理的英文开头
let englishArr = []
// 保存排序后的英文开头
let englishFirst = []
let reg = /\b(\w)|\s(\w)/g
arr.map((v) => {
v[letter] = v[letter].charAt(0).replace(reg, m => m.toUpperCase())
englishArr.push(v[letter])
})
for (let i = 0; i < englishArr.length; i++) {
if (englishFirst.indexOf(englishArr[i]) === -1) {
console.log('true')
englishFirst.push(englishArr[i])
}
}
englishFirst.sort()
englishFirst.forEach((v, i) => {
newArr1[i] = {
tits: v,
items: []
}
arr.forEach((p, index) => {
if (v === p['letter']) {
newArr1[i].items.push(p)
// arr.splice(index, 1)
}
})
})
return newArr1
}
最后处理完的数据长这样儿
1 所有姓名开头字母(以去重)
2 哪一个首字母
3 人物数据
以上就是全部代码,我认为应该有更牛逼的处理代码 一直没有研究 有大佬儿的话可以评论区粘下
注:(样式方面 根据需求改了下,找到他渲染的类名,更改下样式即可)