vue vant 通讯录组件

1.处理数据

引入第三方库将汉字转换成拼音，再提取首字母去完成匹配

import pinyin from "wl-pinyin"

定义一个字母表数组

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

格式化数据

this.index.forEach((item) => {
                    this.allResidentList[item] = [];//this.allResidentList后台传的数据
                    details.data.forEach((el) => {
                        let first = pinyin.getFirstLetter(el.fullName).substring(0, 1);
                        if (first == item) {
                            this.allResidentList[item].push(el)
                        }
                    })
                })

格式化之后的数据

 2.组件引入

<van-index-bar :class="{ hideSidebar: hideSidebar }" :sticky="false">
        <van-index-anchor :index="index" v-for="(item,index) in resident" :key="index">
            <span class="indexWord">{{index}}</span>
            <div class="item" @click="goMsgReply" v-for="citem of item" :key="citem.id">
                <van-row class="patient bor">
                    <van-col span="12">
                        <div class="patient-left">
                            <img v-if="citem.imgUrl" :src="citem.imgUrl" alt="" />
                            <img v-else src="../../../assets/defaultHeadImg.png" alt="" />
                            <div class="patient-msg">
                                <div class="patient-txt">
                                    <div class="name">{{ citem.fullName }}</div>
                                    <span>{{ citem.sex==0?'女':'男' }}</span>
                                    <span>{{ citem.age }}岁</span>
                                </div>
                                <div class="flex">
                                    <span class="tag" v-for="tag of citem.diseaseTags" :key="tag">{{ tag }}</span>
                                </div>
                            </div>
                        </div>
                    </van-col>
                    <van-col span="12">
                        <div class="patient-right">
                            <div class="txt">{{ citem.dossierFlag }} {{ citem.signFlag }}</div>
                        </div>
                    </van-col>
                </van-row>
            </div>

        </van-index-anchor>
    </van-index-bar>