Vant IndexBar atinge o efeito de catálogo de endereços A-Z

Primeiro, observe a renderização final, principalmente para renderizar A - Zum arquivo 通讯录. Da mesma forma, se o que você deseja fazer é uma lista de cidades, também pode consultá-la.

Aqui está o documento oficial do Vant IndexBar para sua conveniência.

O catálogo de endereços anterior era apenas uma lista e os nomes não estavam em ordem, por isso não era conveniente encontrá-lo. Por acaso, vi esse componente Vantna biblioteca de componentes IndexBar, então o substituí imediatamente. Em geral, existem os seguintes dois passos.

1. Formatar dados

No início, os dados que me são fornecidos pelo background são assim, e eu só quero uma lista contendo os nomes.

[
  {
    
    
    "createdAt": "2020-08-27 18:06:53",
    "department": "总经理办公室",
    "employeeName": "安琪拉",
    "objectId": "4a3eed5344",
    "phoneNumber": "18012251502",
    "serialNumber": "1",
    "staffPosition": "总经理",
    "updatedAt": "2020-08-27 18:06:53",
    "username": "18012251502"
  },
  {
    
    
    "createdAt": "2020-08-27 18:06:53",
    "department": "生产部",
    "employeeName": "吕布",
    "objectId": "7236fed315",
    "phoneNumber": "18257122100",
    "serialNumber": "41",
    "staffPosition": "装配",
    "updatedAt": "2020-08-27 18:06:53",
    "username": "18257122100"
  },
  {
    
    
    "createdAt": "2020-08-27 18:06:53",
    "department": "技术部",
    "employeeName": "赵云",
    "objectId": "6a1daa9a80",
    "phoneNumber": "15852855556",
    "serialNumber": "42",
    "staffPosition": "管理员",
    "updatedAt": "2020-08-27 18:07:26",
    "username": "15852855556"
  }
]

employeeListEntão, primeiro processe a lista de funcionários retornada

    let employeeNameList = [];
    for (let k in employeeList) {
    
    
        employeeNameList.push(employeeList[k].employeeName)
    }

A lista de nomes de funcionários após o processamento employeeNameListé assim

[
  "安琪拉",
  "吕布",
  "赵云"
]

Como o nome é um caractere chinês, não pode ser ' A ' , ' B ' .....' X ' , ' Y ' , ' Z 'correspondido com , portanto, é necessário usar uma biblioteca de terceiros para converter o caractere chinês em pinyin e, em seguida, extrair a primeira letra para concluir a correspondência. Eu uso a biblioteca wl-pinyin aqui.
Importe-o antes de usá-lo

import pinyin from "wl-pinyin"

Defina uma matriz alfabética AlphabetListpara armazenar 26 letras maiúsculas.

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

juntar dados

      let firstName = {
    
    };
      this.data.AlphabetList.forEach((item) => {
    
    
        firstName[item] = [];
        employeeNameList.forEach((el) => {
    
    
          /** 主要在这一句，el代表每个名字如 “安琪拉” ，
            pinyin.getFirstLetter(el) 取的是名字的首字母 “AQL” ，
            .substring(0, 1) 就是只取第一个字符 ‘A’ **/
          let first = pinyin.getFirstLetter(el).substring(0, 1);
          if (first == item) {
    
    
            firstName[item].push(el)
          }
        })
      })

O formato final dos dados é o seguinte

{
    
    
  "A": [
    "安琪拉"
  ],
  "B": [
    "百里守约","白起","不知火舞"
  ],
  ...
  "H": [
    "黄忠"
  ],
  "L": [
    "吕布"
  ],
  "M": [
      "马可波罗","马超"
  ],
  ...
  "Z": [
    "赵云","甄姬"
  ]
}

2. Introduzir componentes no layout

<van-index-bar :sticky="false" >
    <view wx:for="{
     
     {employeeNameList}}" wx:for-index="key"  wx:for-item="value">
       <!--显示 A-Z -->
        <van-index-anchor :use-slot="true" index='{
     
     {key}}'>
          </van-index-anchor>
           <!--遍历每个字母对应的名字数组-->
       <view  wx:for='{
     
     {value}}' wx:for-item='employeeName' >{
   
   {employeeName}}</view>
    </view>
</van-index-bar>

---

Agora são 18:54:08 do dia 22 de setembro de 2020, saia do trabalho