前端——》vue中element分组+搜索+模糊匹配多选下拉框

原创

于 2020-01-06 17:53:10 发布 · 7k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#vue拼音转汉字 #vue提取首字母 #vue下拉框分组 #下拉分组多选搜索 #linq的使用

本文介绍了如何在Vue项目中使用Element UI实现分组+搜索功能的多选下拉框，涉及Vue模块导出、Linq使用、一级和二级分组逻辑处理。同时分享了数据准备、拼音处理JS方法，并提供了相关资源下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：

这个功能实现起来其实不是很难，主要有几处细节需要注意

1，vue中js模块的导出

2，linq的使用

3，一级分组和二级分组的业务逻辑处理

主要实现步骤如下：

一：准备linq

1，安装linq。

npm install linq

2，在main.js中引用

import linq from 'linq';
Vue.prototype.Enumerable=linq;

3，对linq的理解。个人觉得跟Java8中的stream操作较像，具体使用可以百度到，

二：template页面

<el-form-item v-if="editDailogFormType=='region'" label="需求省份" prop="channelName">
                    <el-select v-model="regionConfigForm.citys" placeholder="请选择区域"
                               multiple
                               filterable
                               remote
                               reserve-keyword
                               :remote-method="(queryString)=>{remoteMethod(queryString);}"
                               style="width: 100%;">
                        <el-option-group
                                v-for="group in multipleSelectOption"
                                :key="group.province"
                                :label="group.province"
                                @click.native="checkProvince(group.province)">
                            <el-option