用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 } = thislet 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.useriditem.name = item.truenamethis.$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-groupv-for="(group, index) in lastList":key="index":group="group"><cube-index-list-itemv-for="(item, index2) in group.items":key="index2":item="item"@select="selectItem"><div class="custom-item"><cube-checkboxv-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事件问题就解决了，处理数据刚开始不知道怎么下手，因为刚开始研发让前端来实现汉子转换拼音，筛选出首字母，后来研发把每条数据加了一个拼音的首字母，问题自然而然的解决了，

用vue实现按字母排序的多选列表功能类似通讯录相关推荐

vue 按A-Z字母排序数据
<template><div class="game" :class="{'game__spacing': sel ...
html5 a-z字母排序,Mint UI实现A-Z字母排序的城市选择列表
本文实例为大家分享了Mint Ul实现A-Z字母排序的城市选择列表的具体代码,供大家参考,具体内容如下效果图如下: 项目文件存放路径图: 所有代码如下: import city from " ...
html 字母列表通讯录,仿微信通讯录字母排序列表
先看下效果图 Gif_20180425_103334.gif 在这里我们先分析下效果,左边是一个按照字母排序的并有子列表,右边是直接一个字母的排列,屏幕中间有一个显示你点击了右边的那个字母的显示. 在 ...
【工具封装】Python 字典列表按中文姓名首字母排序
第三方模块: 功能: 汉字拼音转换模块,将汉字转为拼音:可以用于汉字注音.排序.检索. 模块名称: pypinyin 官方文档: https://pypi.org/project/pyp ...
android按字母数字排序,android 实现字母排序
//字母排序列表 String[] letter = { "A", "B", "C", "D", "E&quo ...
英文首字母排序mysql_利用MySQL数据库来处理中英文取首字母排序
[package com.syz;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import ja ...
Oracle 10g如何对用户姓名，按首字母排序、查询
2019独角兽企业重金招聘Python工程师标准>>> 首先介绍Oracle 9i新增加的一个系统自带的排序函数 1.按首字母排序在oracle9i中新增了按照拼音.部首.笔画排序 ...
微软Java面试题-按照字母排序
1.对字符串进行排序,用任意一种编程语言来实现,不能使用现有的类,在排序中,字符串"Bc","Ad","aC","Hello&qu ...
联系人排序java代码_Android仿微信联系人按字母排序_脚本之家
App只要涉及到联系人的界面,几乎都是按照字母排序以及导航栏的方式.既然这个需求这么火,于是开始学习相关内容,此篇文章是我通过参考网上资料独立编写和总结的,希望多多少少对大家有所帮助,写的不好,还请各 ...

用vue实现按字母排序的多选列表功能类似通讯录

用vue实现按字母排序的多选列表功能类似通讯录相关推荐

最新文章

热门文章