Vue元素分组多选可搜索挑选选择器实现示例

最终效果（选择mult_group_selection)见下图。实际就是将元素三种官方挑选实例整合起来，同时实现分组多选可搜索，此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考

准备工作：

除了某视频剪辑软件脚手架、元素等必要包之外。该项目还用到了linq。js(https://github。com/mihaifm/linq)，该工具可以快速从数组中查找所需内容。

新公共管理安装-保存查询表达式编辑build/webpack.base.conf.js

模块：{.//添加新的网络包提供插件({可枚举的： ' linq ' })数据源格式：

var selectList=[ { name: ' '，//一级名称CName: ' '，//二级名称value:'' //值}，{name: ' '，CName: ' '，value:''}，]实现：

脚本

data(){ return { select model :[]，multipleselectoptions :[]，}}，methods:{ //将源数据转成元素所需格式transMultipleSelectOption(){ var 1级列表=可枚举。(从这。all selectlist ).独特的(' o=o.name ').toArray()；var newArr=级列表。map(item={ let children=可枚举。(从这。all selectlist)).其中((o)={返回o . name==item。姓名；}).toArray()；var选项=子级。map(itemc={ return { ' name ' : itemc .CName，“值”: itemc。值}；});返回{'name': item.name，' options ' : options } })；这个。multipleselectoption=NewArr}, //重置选项（选择自动补全相关)remoteMethod(queryString，list){//list 3360原始数据var mappedList=可枚举。来自(名单).其中((o)={ return o . cname。indexof(查询字符串)！=-1 | | o . name。indexof(查询字符串)！=-1;}).toArray()；//找出匹配搜索关键字的数据集var级列表=可枚举。来自(地图列表).独特的(' o=o.name ').toArray()；//从所匹配的数据集中找出所有一级菜单集合（含去重) //重新拼成元素所需的数据格式var newArr=级列表。map(item={ let children=可枚举。来自(mappedList)).其中((o)={返回o . name==item。姓名；}).toArray()；var选项=子级。map(itemc={ return { ' name ' : itemc .CName，“值”: itemc。值}；});返回{'name': item.name，' options ' : options } })；这个。multipleselectoption=NewArr}, //点击一级菜单全选/全不选实现checkAll(值){ //value:点击的一级name var list=可枚举。(从这。multipleselectoption ).其中((o)={返回o . name==值；}).toArray()；var级值列表=启用。来自(列表[0])。选项)。选择(“o=o.value”).toArray()；//所有该一级下二级的价值集合var num=0；二级值elist。foreach(值)={ this.selectModel2.forEach((模型，索引)={ if(模型==值){ this.selectModel2.splice(索引，1);//如有匹配，先删除数量；返回真；} })})if(num level 2 valelist。长度){//需要全选这个。selectmodel 2=这个。选择型号2。concat(2级value elist)；//合并数组} }}，挂载ed :函数(){ this。transmultipleselectoption()；},模板

el-select v-model='selectModel '多个可筛选远程保留-关键字占位符='请输入关键词： remote-method='(查询字符串)={ remote method(查询字符串，all select list)；} ' El-option-group v-for=' group in multipleselect option ' : key=' group。name ' : label=' group。名称' @单击。native=' checkAll(组。名称)' El-option v-for='组。选项“:键=”项。值“:标签=”项。name ' : value=' item。值'/El-选项/El-选项-组/El-选择以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。