Vant indexBar 索引栏用法和搜索条件的功能

小菜鸟一枚,第一次尝试这写项目中的遇到的问题.(多总结,俗话说:好记性不如个烂笔头~~)
最近在做移动端页面,其中遇到类似于查找联系人的功能,先看ui图吧,

看到这样的图立马想起来通讯录的功能,因为移动端用的是Vant的框架,所以呢~就用了indexBar的索引栏,

链接如下:添加链接描述

官网的indexBar的基础用法是下面这样的:

<van-index-bar>
  <van-index-anchor index="A" /> //这里是每一类型行的标题
  <van-cell title="文本" />  //这里是每一类型下行内容的标题
  <van-cell title="文本" />
  <van-cell title="文本" />

  <van-index-anchor index="B" />
  <van-cell title="文本" />
  <van-cell title="文本" />
  <van-cell title="文本" />

  ...
</van-index-bar>

根据上面官网的例子呢,目前达不到项目的中的样式和需求,那么在仔细看下内容这里 这熟悉吗?

想了解更多的van-cell,可访问这个链接:添加链接描述

下面就说我是怎么写这块的HTML的吧.

 <van-index-bar :index-list="Object.keys(contactPersonData)">    
  <template v-for="(item, index) in Object.entries(contactPersonData)" >       
  <van-index-anchor :index="item[0]" :key="index">{
     {
      item[0] }}</van-index-anchor>      
    <van-cell center :title="`${valItem.realName} 【${valItem.account}】`" 
       :label="onTitle(valItem)"  v-for="(valItem, index) in item[1]" :key="index">      
      <template #icon>          
        <van-image  round :src="valItem.headImageSequence" />         
      </template>       
    </van-cell>     
   </template>   
 </van-index-bar>

注释解说
(1) Object.keys 是ES6中的方法,是获取对象的key值的.(2) Object.entries 返回一个数组,可以把一个对象的键值以数组的形式遍历出来
例如:
var obj = { foo: ‘bar’, baz: 42 };
console.log(Object.entries(obj));
得到的结果是:
(3)${valItem.realName} 【${valItem.account}】 ``和${} 也是ES6中的知识点啦.模板字符串嘛.
比之前的用 + 拼接方便好多了~^_
(4)