仿微信通讯录--按姓氏进行分类

话不多说，先上效果图，看看是不是你们需要实现的效果

如果是要这样效果的话，下面上代码（主要分为三个部分）：

1、html部分

<div class="contentData">
   <div v-for="(item, index) in letterData" :key="index">
      /** 这是首字母 */
      <div class="data_title" v-if="item.data.length > 0">{{item.letter}}</div>
      /** 这是该首字母下的数据 */
      <div class="dataList" v-for="(detail, index) in item.data" :key="index" >
          <img :src="detail.room.pic" alt="" v-if="detail.room.pic !== ''">
          <div class="data_info">
             <p>
                <span>{{detail.room.name}}</span>
                <span>（{{detail.room.noSpanName}}）</span>
             </p> 
             <p>{{detail.room.code}}</p>
           </div>
       </div>
    </div>
</div>
/** 代码我只保留最精简的数据部分，方便小可爱们理解 */

2、数据结构部分

export function initLetter(letterData: any[]) {
  const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 
                   'O',  'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#']
  letters.map((L) => {
      letterData.push({
          randomMsg:'M'+(Math.random()*1000).toFixed(2)+'G'(Math.random()*1000).toFixed(2),
          letter: L,
          data: []
      })
  })
  return letterData
}
/** letterData是一个数组对象，randomMsg的作用不是很明显，letter就是首字母，data就是对应该首字母的数据 */
/** 由于这部分数据结构挺复杂，所以单独在letter.ts文件中写了一个initLetter方法 */
/** 还有一点要说，本项目采用的是ts写法 */

定义好了letter.ts文件，在你需要用的文件中引用就可以了，复用性强。

3、最重要的一部分：数据逻辑

这里用到一个插件pinyin（https://npm.taobao.org/package/pinyin）

private letterData: any[] = [];

/** 从name提取首字母并将数据按首字母分类 */
private onClassify(data: any[]) {
    this.letterData = [];
    /** 由于在第二步时已经引用了letter.ts文件，所以initLetter方法可以直接使用 */
    this.letterData = initLetter(this.letterData);
    /** 此时letterData的数据结构如下图1 */

    data.map((item: any) => {
      let fullName = ''
      fullName = item.name
      
      if (fullName === '') {
        this.letterData[26].data.push(item);
      } else {
        /** 这里用到了一个插件（pinyin），可以提取首个字的拼音 */
        const name = pinyin(fullName, {
          style: pinyin.STYLE_NORMAL
        })[0][0];   /** 提取name第一个字的拼音 */
        const indexLetter = name.substring(0, 1);  /** 截取拼音的第一个字母 */
        const reg = /^[a-z]|[A-Z]/g;

        if (indexLetter.match(reg)) {    
        /** 如果首字母符合正则，则将首字母变为大写再与字母表中的进行匹配，如果一样则将该条数据插入到letterData.data中 */
          this.letterData.map((l) => {
            if (l.letter === indexLetter.toUpperCase()) {
              l.data.push(item);
            }
          })
        } else {
          this.letterData[26].data.push(item);
        }
      }
    })
    console.info(this.letterData)
    /** 最后成功的数据结构如图2 */
}

图1： 

图2：