Vue Element 分组+多选+可搜索Select选择器实现示例


Posted in Javascript onJuly 23, 2018

最终效果(http://47.98.205.88:3000/mult_group_selection)见下图。实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考

Vue Element 分组+多选+可搜索Select选择器实现示例

准备工作:

除了vue脚手架、element等必要包之外。该项目还用到了linq.js(https://github.com/mihaifm/linq),该工具可以快速从数组中查找所需内容。

npm install --save linq

编辑build/webpack.base.conf.js

module:{
  ......
  //添加
  new webpack.ProvidePlugin({
   Enumerable: "linq"
  })
}

数据源格式:

var selectList = [
 {
  name:"",//一级名称
  CName:"", //二级名称
  value:"" //值
 },
 {name:"",CName:"",value:""},
 ......
]

实现:

script

data (){
 return{  
  selectModel: [],
  multipleSelectOption:[],
 }
},
methods:{
  //将源数据转成element所需格式
  transMultipleSelectOption(){
    var level1List = Enumerable.from(this.allSelectList).distinct("o=>o.name").toArray();
       
     var newArr = level1List.map(item=>{
       let children = Enumerable.from(this.allSelectList).where((o)=>{return o.name==item.name;}).toArray();

       var options = children.map(itemc=>{
         return {"name": itemc.CName, "value":itemc.value};
       });    
       return {"name": item.name, "options":options}
     });
     this.multipleSelectOption = newArr;
  },    
  //重置options(select自动补全相关)
  remoteMethod(queryString, lists) { //lists:原始数据
     var mappedList = Enumerable.from(lists).where((o)=>{return o.CName.indexOf(queryString)!=-1 
       || o.name.indexOf(queryString)!=-1;}).toArray(); //找出匹配搜索关键字的数据集
     var level1List = Enumerable.from(mappedList).distinct("o=>o.name").toArray(); //从所匹配的数据集中找出所有一级菜单集合(含去重)
    //重新拼成element所需的数据格式
     var newArr = level1List.map(item=>{
       let children = Enumerable.from(mappedList).where((o)=>{return o.name==item.name;}).toArray();

       var options = children.map(itemc=>{
         return {"name": itemc.CName, "value":itemc.value};
       });    
       return {"name": item.name, "options":options}
     });
     this.multipleSelectOption = newArr;
  },
  //点击一级菜单全选/全不选实现
  checkAll(value){ //value: 点击的一级name
     var list = Enumerable.from(this.multipleSelectOption).where((o)=>{return o.name==value;}).toArray();
     var level2ValueList = Enumerable.from(list[0].options).select("o=>o.value").toArray(); //所有该一级下二级的value集合

     var num=0;
     level2ValueList.forEach((value)=>{
       this.selectModel2.forEach((model, index)=>{
        if(model==value){
         this.selectModel2.splice(index, 1); //如有匹配,先删除
         num++;
         return true;
        }
       })
      })

      if(num < level2ValueList.length){ //需要全选
       this.selectModel2 = this.selectModel2.concat(level2ValueList); //合并数组
      }
  
   }
},
mounted: function(){
   this.transMultipleSelectOption();
},

template

<el-select v-model="selectModel" multiple filterable remote reserve-keyword 
  placeholder="请输入关键词" :remote-method="(queryString)=>{
    remoteMethod(queryString, allSelectList);
  }">
  <el-option-group v-for="group in multipleSelectOption"
   :key="group.name"
   :label="group.name" 
   @click.native="checkAll(group.name)">
   <el-option v-for="item in group.options"
     :key="item.value"
     :label="item.name"
     :value="item.value">
   </el-option>
  </el-option-group>
</el-select>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
js日历功能对象
Jan 12 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
jquery实现搜索框功能实例详解
Jul 23 #jQuery
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 #Javascript
Vue+axios实现统一接口管理的方法
Jul 23 #Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 #Javascript
js正则表达式校验指定字符串的方法
Jul 23 #Javascript
js中时间格式化的几种方法
Jul 22 #Javascript
详解vue axios二次封装
Jul 22 #Javascript
You might like
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
js创建数组的简单方法
2016/07/27 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
js实现图片左右滚动效果
2017/02/27 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
使用Angular Cli如何创建Angular私有库详解
2019/01/30 Javascript
NodeJs 实现简单WebSocket即时通讯的示例代码
2019/08/05 NodeJs
python实现目录树生成示例
2014/03/28 Python
Python下的常用下载安装工具pip的安装方法
2015/11/13 Python
python处理xml文件的方法小结
2017/05/02 Python
Python 通过URL打开图片实例详解
2017/06/01 Python
Django中的Model操作表的实现
2018/07/24 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python实现滑雪游戏
2020/02/22 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
分享一个python的aes加密代码
2020/12/22 Python
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
淘宝客服自我总结鉴定
2014/01/25 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
英语教师个人总结
2015/02/09 职场文书
盲山观后感
2015/06/11 职场文书
师范生见习自我总结
2015/06/23 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis