js 数组遍历渲染

后端返回这种数组、需要渲染成按字母排序的通讯录

      <van-tab title="按字母">
        <van-index-bar class="anchorBar">
          <template v-for="(item, index) in data">
            <van-index-anchor :index="index" :key="index" />
            <van-cell
              center
              v-for="(item2, index2) in item"
              :key="index2"
              :title="item2.realName"
              :label="item2.userPost"
              @click.native.stop="choiceMail(item2.userBaseId, item2.realName)"
            >
            </van-cell>
          </template>
        </van-index-bar>
      </van-tab>

这样写没实现了,各位帮忙看看、谢谢了

阅读 2.1k
2 个回答
const dict = {
    c: [{id:1}, {id: 2}],
    b: [{id:11}, {id: 22}],
    a: [{id:111}, {id: 222}],
}

const sortByLetter = (dict) => {
    const letters = Object.keys(dict).sort();
    const ret = letters.map(letter => ({ letter, children: dict[letter]}));
    return ret;
}

你在这个基础上改一下就可以了

array有自带的sort方法,
可以自定义sort中的排序规则

a= [{name:"bbb"},{name:"ddd"},{name:"aaa"}]

a.sort(function(a,b){
    if(a.name<b.name){
        return -1
    }else{
        return 1
    }
})

每次拿出两个元素对比,a<b就返回-1往后排,否则往前排
如果是中文的话可能会更复杂点,因为要转到汉语拼音,目前只有少数浏览器有这个函数localeCompare

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题