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中剪贴板兼容性、判断复制成功或失败
Mar 09 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
实现无刷新联动例子汇总
May 20 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
微信小程序progress组件使用详解
Jan 31 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
Vue指令指令大全
Feb 09 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
解决Layui数据表格的宽高问题
Sep 28 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学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php编写简单的文章发布程序
2015/06/18 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
Extjs学习笔记之七 布局
2010/01/08 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
工作个人的自我评价
2014/01/14 职场文书
自荐信如何制作?
2014/02/21 职场文书
销售顾问岗位职责
2014/02/25 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
员工趣味活动方案
2014/08/27 职场文书
员工团队活动方案
2014/08/28 职场文书
祝酒词范文
2015/08/12 职场文书
python not运算符的实例用法
2021/06/30 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技