Mint ui 联系人列表（index list）

前段时间做了一个基于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 人物数据

以上就是全部代码，我认为应该有更牛逼的处理代码 一直没有研究 有大佬儿的话可以评论区粘下

注：（样式方面 根据需求改了下，找到他渲染的类名，更改下样式即可）