这两天做项目，pc端本来是一个简单的select多选功能，做到客户端的时候，产品要求做成按字母排序功能，类似手机通讯录功能，由于我们客户端用的滴滴的cube-ui 组件，我选择了cube-ui IndexList，在它的基础上进行扩展。大致效果如果下图

在这里插入图片描述

转换数据代码如下

//先转换成对象，根据firstchar字段对应的字母，先循环字母数组，设置字母为k,对应数组为键值
 lists () {
      const { adminListDatas } = this
      let obj = {}
      const arr2 = [ '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' ]
      for (let i = 0; i < arr2.length; i++) {
        obj[arr2[i]] = []
        adminListDatas.forEach((item, index) => {
          item.value = item.userid
          item.name = item.truename
          this.$set(item, 'checked', false)
          if (arr2[i] === item.firstchar) {
            obj[arr2[i]].push(item)
          }
        })
      }
      return obj
    },
    //把数据转换成cube-ui IndexList 需要的数据
    lastList () {
      let arr = []
      for (let[key, value] of Object.entries(this.lists)) {
        if (value.length) {
          arr.push({
            name: key,
            items: value
          })
        }
      }
      return arr
    }

然后利用组件的slot自定义，把checkbox组件加到相应的里面，不能用cube-ui IndexList的select事件，因为它会触发两次事件，建议用checkbox的input绑定值变化的事件，再对数据进行相应的改变，代码如下

<template>

  <div class="select-list-list">
    <cube-index-list>
      <cube-index-list-group
        v-for="(group, index) in lastList"
        :key="index"
        :group="group"
      >
        <cube-index-list-item
          v-for="(item, index2) in group.items"
          :key="index2"
          :item="item"
          @select="selectItem"
        >
          <div class="custom-item">
            <cube-checkbox
              v-model="item.checked"
              position="left"
              shape="square"
              @input="getval(item,$event)"
            >
              {{ item.name }}
            </cube-checkbox>
          </div>
        </cube-index-list-item>
      </cube-index-list-group>
    </cube-index-list>
  </div>
</template>

利用checkbox的input事件，把选中的数据userid放到checkList里面，取消的从checklist数组中移除，然后触发getaminlist 传给父组件，把选中的值传给父组件

getval (item, $event) {
      const index = this.checkList.indexOf(item.userid)
      if ($event && (index === -1)) {
        this.checkList.push(item.userid)
      } else if (!$event && (index > -1)) {
        this.checkList.splice(index, 1)
      }
      this.$emit('getadminList', this.checkList)
    }

看起来似乎简单，但在处理checkbox上浪费了不少时间，刚开始一直想着从indexlist的select事件方法中处理数据，发现怎么试都容易引起两次触发，后来改成checkbox的input事件问题就解决了，处理数据刚开始不知道怎么下手，因为刚开始研发让前端来实现汉子转换拼音，筛选出首字母，后来研发把每条数据加了一个拼音的首字母，问题自然而然的解决了，