Vue Element 分组+多选+可搜索Select选择器实现示例
程序员文章站
2022-07-03 21:36:00
最终效果()见下图。实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考...
最终效果()见下图。实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考
准备工作:
除了vue脚手架、element等必要包之外。该项目还用到了linq.js(),该工具可以快速从数组中查找所需内容。
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: vue 中的keep-alive实例代码
下一篇: Node(Npm)的安装与配置