用vue實現按字母排序的多選列表功能相似通信錄

這兩天作項目，pc端原本是一個簡單的select多選功能，作到客戶端的時候，產品要求作成按字母排序功能，相似手機通信錄功能，因爲咱們客戶端用的滴滴的cube-ui 組件，我選擇了cube-ui IndexList，在它的基礎上進行擴展。大體效果若是下圖

其實難點在於如何處理數據，研發返回的數據，返回的格式如： { "error": 0, "payload": { "count": "16", "list": [{ "userid": 100008, "truename": "Ayoung", "mobile": "13592579211", "firstchar": "A" }, { "userid": 100007, "truename": "安", "mobile": "", "firstchar": "A" }, { "userid": 100006, "truename": "bbs", "mobile": "", "firstchar": "B" }, { "userid": 100011, "truename": "兵馬", "mobile": "", "firstchar": "B" }, { "userid": 100012, "truename": "陳", "mobile": "", "firstchar": "C" }, { "userid": 100000, "truename": "創始人", "mobile": "13503457031", "firstchar": "C" }, { "userid": 100015, "truename": "huang", "mobile": "", "firstchar": "H" }, { "userid": 100009, "truename": "韓", "mobile": "", "firstchar": "H" }, { "userid": 100010, "truename": "黃", "mobile": "", "firstchar": "H" }, { "userid": 100005, "truename": "Jea", "mobile": "", "firstchar": "J" }, { "userid": 100025, "truename": "lzc", "mobile": "15638550436", "firstchar": "L" }, { "userid": 100013, "truename": "慄", "mobile": "", "firstchar": "L" }, { "userid": 100003, "truename": "彭", "mobile": "", "firstchar": "P" }, { "userid": 100002, "truename": "晴天～", "mobile": "", "firstchar": "Q" }, { "userid": 100004, "truename": "強", "mobile": "", "firstchar": "W" }, { "userid": 100001, "truename": "dddd", "mobile": "", "firstchar": "W" }] }, "message": "", "baseinfo": { "userid": 100001, "username": "huang", "truename": "lanfeng", "mobile": "15003844853", "isvalid_mobile": 1, "email": "", "isvalid_email": 0, "bind_gcw": 0, "bind_qiwei": 1, "bind_dingding": 0, "logintime": 1562912343, "cer_status": 1, "is_notice_bind": 0, "base_role": 0 } }

轉換數據代碼以下

//先轉換成對象，根據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事件問題就解決了，處理數據剛開始不知道怎麼下手，由於剛開始研發讓前端來實現漢子轉換拼音，篩選出首字母，後來研發把每條數據加了一個拼音的首字母，問題天然而然的解決了，