仿手机通讯录的字母排序

先看效果

后端返回的是无序列表，且没有前面的字母。

分析思路：

第一步 首先将数组进行排序。

第二步 组建一个对象数组，对象里的两个字段分别是首字母和首字母是该字母的项。

第三步 渲染到页面上，和单层循环渲染不一样了。

第四步 开敲！

注*： 创建变量,tableData为数据，letters为字母顺序

      tableData: [],
      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",
      ],

注*：⬇方法体 没啥可说的

let all = [];
        for (let i = 0; i < this.letters.length; i++) {
          let arr = [];
          const e = this.letters[i];
          for (let j = 0; j < res.data.length; j++) {
            const item = res.data[j];
            if (item.name[0].toUpperCase() == e) {
              arr.push(item);
            }
          }
          all.push({
            letter: e,
            list: arr,
          });
        }
        this.tableData = all;

注*：渲染的时候要写两层循环，要看清结构

<table>
        <tr
          class="th info-item hand between"
          v-for="item in tableData"
          :key="item.id"
        >
          <td style="width:100%">
            <div class="text">{{ item.letter }}</div>
            <div
              v-for="ele in item.list"
              :key="ele.id"
              class="thd"
              @click="stepUp(ele)"
            >
              <div>{{ ele.name }}</div>
              <div class="line"></div>
            </div>
          </td>
        </tr>
      </table>

总结：功能不算复杂，仔细分析就能搞出来。

需要注意的是点击事件位置不要写在第一层循环上，传的参也要注意。