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 人物数据

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

注:(样式方面 根据需求改了下,找到他渲染的类名,更改下样式即可)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

D丶bird

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值