Vue【原创】基于elementui的【分组多选下拉框group-select】
效果图：
如图分为多选模式和单选模式。
group-select：
1 <template>
2 <div>
3 <el-select
4 v-model="innerValue"
5 :placeholder="placeholder"
6 @change="changeSelect"
7 :clearable="clearable"
8 :multiple="multiple"
9 :collapse-tags="collapseTags"
10 size="small"
11 popper-class="productGroupSelector"
12 >
13 <el-option-group class="productGroupSelector-group" v-for="group in options" :key="group.label" :label="group.label">
14 <div style="display: flex; align-items: start;" v-if="multiple">
15 <div style="display: flex;align-items: center; padding-top: 8px; padding-left: 10px">
16 <el-checkbox v-model="group.checked" @change="selectAll($event, group.id)" :indeterminate="group.isIndeterminate"></el-checkbox>
17 </div>
18 <div>
19 <el-option
20 class="productGroupSelector-option"
21 v-for="item in group.options"
22 :key="item.value"
23 :label="item.label"
24 :value="item.value"
25 ></el-option>
26 </div>
27 </div>
28
29 <div v-else>
30 <el-option
31 class="productGroupSelector-option"
32 v-for="item in group.options"
33 :key="item.value"
34 :label="item.label"
35 :value="item.value"
36 ></el-option>
37 </div>
38 </el-option-group>
39 </el-select>
40 </div>
41 </template>
42 <script>
43 export default {
44 name: 'LiloGroupSelect',
45 model: {
46 prop: 'value',
47 event: 'change'
48 },
49 props: {
50 value: {
51 type: [String, Array],
52 default: ''
53 },
54 options: {
55 type: Array,
56 default() {
57 return [];
58 }
59 },
60 placeholder: {
61 type: String,
62 default: '请选择'
63 },
64 multiple: {
65 type: Boolean,
66 default: false
67 },
68 clearable: {
69 type: Boolean,
70 default: false
71 },
72 collapseTags: {
73 type: Boolean,
74 default: false
75 }
76 },
77 data() {
78 return {
79 innerValue: ''
80 };
81 },
82 mounted() {
83 this.innerValue = this.value;
84 },
85 watch: {
86 value(newVal, odlVal) {
87 this.innerValue = newVal;
88 }
89 },
90 methods: {
91 selectAll(val, id) {
92 const selectOption = this.options.find(f => f.id === id);
93 const arr = selectOption.options.map(m => m.value);
94 if (val) {
95 if((typeof this.innerValue !== 'object') || this.innerValue.constructor !== Array) {
96 this.innerValue = [];
97 }
98 arr.forEach(item => {
99 if (!this.innerValue.includes(item)) {
100 this.innerValue.push(item);
101 }
102 });
103 } else {
104 this.innerValue.forEach((item, index) => {
105 if (arr.includes(item)) {
106 this.innerValue.splice(index, 1, '');
107 }
108 });
109 }
110 this.innerValue = this.innerValue.filter(f => f !== '');
111 if (selectOption.checked) {
112 selectOption.isIndeterminate = false;
113 }
114 this.$emit('change', this.innerValue);
115 },
116 changeSelect(val) {
117 if (this.multiple) {
118 this.options.forEach(item => {
119 const arr = item.options.map(m => m.value);
120 item.isIndeterminate = arr.some(v => {
121 return val.some(s => s === v);
122 });
123 item.checked = arr.every(v => {
124 return val.some(s => s === v);
125 });
126 if (item.checked) {
127 item.isIndeterminate = false;
128 }
129 });
130 this.$emit('change', this.innerValue);
131 } else {
132 this.$emit('change', val);
133 }
134 }
135 }
136 };
137 </script>
138
139 <style>
140 .productGroupSelector {
141 min-width: initial !important;
142 width: 415px;
143 }
144 </style>
145
146 <style lang="scss" scoped>
147 ::v-deep {
148 .el-select-group {
149 width: 400px;
150 display: flex;
151 flex-wrap: wrap;
152 justify-content: start;
153 padding: 0px 10px;
154 }
155
156 .el-select-group__title {
157 padding-left: 20px;
158 font-size: 12px;
159 }
160 }
161
162 .productGroupSelector-group {
163 padding-top: 5px;
164 display: flex;
165 // align-items: center;
166 // flex-wrap: wrap;
167 // width: 400px;
168 padding-bottom: 5px;
169 flex-direction: column;
170 margin: 0 5px;
171
172 &:not(:last-child) {
173 border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
174 }
175
176 &::after {
177 display: none;
178 }
179 }
180
181 .productGroupSelector-option {
182 display: inline-flex;
183 align-items: center;
184 flex-wrap: wrap;
185 }
186
187 // .productGroupSelector {
188 // .el-scrollbar__view .el-select-dropdown__list {
189 // display: flex;
190 // flex-wrap: wrap;
191 // justify-content: space-between;
192 // align-items: baseline;
193 // padding-top: 0;
194 // overflow-x: hidden;
195 // }
196 // .el-select-dropdown__wrap .el-scrollbar__wrap {
197 // max-height: 350px;
198 // }
199 // }
200 </style>
调用示例：
1 <el-row :gutter="20" class="mt-10">
2 <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
3 <lilo-group-select :options="groupSelectOptions" @change="groupSelectChange" multiple clearable></lilo-group-select>
4 </el-col>
5 <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
6 <lilo-group-select :options="groupSelectOptions2" @change="groupSelectChange" clearable></lilo-group-select>
7 </el-col>
8 </el-row>
测试数据：
1 groupSelectOptions: [
2 {
3 id: 1,
4 label: '热门城市',
5 checked: false,
6 isIndeterminate: false,
7 options: [
8 {
9 value: 'Shanghai',
10 label: '上海'
11 },
12 {
13 value: 'Beijing',
14 label: '北京'
15 }
16 ]
17 },
18 {
19 id: 2,
20 label: '城市名',
21 checked: false,
22 isIndeterminate: false,
23 options: [
24 {
25 value: 'Chengdu',
26 label: '成都'
27 },
28 {
29 value: 'Shenzhen',
30 label: '深圳'
31 },
32 {
33 value: 'Guangzhou',
34 label: '广州'
35 },
36 {
37 value: 'Dalian',
38 label: '大连'
39 },
40 {
41 value: 'Huizhou1',
42 label: '惠州1'
43 },
44 {
45 value: 'Huizhou2',
46 label: '惠州2'
47 },
48 {
49 value: 'Huizhou3',
50 label: '惠州3'
51 },
52 {
53 value: 'Huizhou4',
54 label: '惠州4'
55 },
56 {
57 value: 'Huizhou5',
58 label: '惠州5'
59 },
60 {
61 value: 'Huizhou6',
62 label: '惠州6'
63 }
64 ]
65 }
66 ],
67 groupSelectOptions2: [
68 {
69 id: 1,
70 label: '超期',
71 options: [
72 {
73 value: 'cqwbj',
74 label: '超期未办结'
75 },
76 {
77 value: 'ycq',
78 label: '已超期'
79 }
80 ]
81 },
82 {
83 id: 2,
84 label: '按天',
85 options: [
86 {
87 value: 't1',
88 label: '1天'
89 },
90 {
91 value: 't2',
92 label: '2天'
93 },
94 {
95 value: 't3',
96 label: '3天'
97 },
98 {
99 value: 't4',
100 label: '4天'
101 },
102 {
103 value: 't5',
104 label: '5天'
105 },
106 {
107 value: 't6',
108 label: '6天'
109 },
110 {
111 value: 't7',
112 label: '7天'
113 },
114 {
115 value: 't8',
116 label: '8天'
117 },
118 {
119 value: 't9',
120 label: '9天'
121 }
122 ]
123 },
124 {
125 id: 3,
126 label: '按小时',
127 options: [
128 {
129 value: 'h1',
130 label: '1小时'
131 },
132 {
133 value: 'h2',
134 label: '2小时'
135 },
136 {
137 value: 'h3',
138 label: '3小时'
139 },
140 {
141 value: 'h4',
142 label: '4小时'
143 },
144 {
145 value: 'h5',
146 label: '5小时'
147 },
148 {
149 value: 'h6',
150 label: '6小时'
151 },
152 {
153 value: 'h7',
154 label: '7小时'
155 },
156 {
157 value: 'h8',
158 label: '8小时'
159 },
160 {
161 value: 'h9',
162 label: '9小时'
163 }
164 ]
165 }
166 ]
1 groupSelectChange(val) {
2 console.log(val);
3 }
若代码中涉及到的工具类和图片资源，请移步页面底部的gitee地址下载源码。
Vue【原创】基于elementui的【分组多选下拉框group-select】的更多相关文章
- pentaho cde 自定义复选下拉框 checkbox select
pentaho 自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...
- 多选下拉框（select 下拉多选）
方法一:使用multiple-select.js和multiple-select .css实现 HTML代码: <select id='checkedLevel' style="wid ...
- Easyui-Combobox多选下拉框
因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...
- Extjs4.2 多选下拉框
//多选下拉框 Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.mu ...
- js：jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- DropDownList单选与多选下拉框
一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...
- Bootstrap3级联多选下拉框
<!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...
- js怎么能取得多选下拉框选中的多个值？
方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值.实例演示如下: 1.HTML结构 1 2 3 4 ...
- js多选下拉框
1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
随机推荐
- jdg安装及环境设置
1.下载java8 java11 到默认路径 2.右击我的电脑,点击属性 3.点击高级系统设置 4.点击环境变量 5.点击新建 6. 按照提示新建条目 第一个 变量名填入: JAVA_HOME 变量值 ...
- [安全开发] SQL注入扫描（一股子GPT味~）
实际上大部分都是它写的,它真我哭 SQL注入扫描就是一种用于检测和预防SQL注入攻击的工具.它通过模拟SQL注入攻击的方式,向目标网站发送特定的SQL查询语句,以验证目标网站是否存在SQL注入漏洞.S ...
- flutter填坑之旅（配置本地资源文件）
一.添加单个资源文件 项目下创建一个assets目录,在该目录下存放对应的资源文件(json.image.-) pubspec.yaml文件中配置资源文件路径(注意缩进要与上下文一直) assets: ...
- Python基础 - 赋值运算符
以下假设变量a为10,变量b为20: 运算符 描述 实例 = 简单的赋值运算符 c = a + b 将 a + b 的运算结果赋值为 c += 加法赋值运算符 c += a 等效于 c = c + a ...
- RESTful API 简介
RESTful API 简介 想必使用过 PHP.JSP 这一类服务器动态页面技术的程序员应该都还记得,在使用这种传统的动态页面架构构建应用程序的时候,用于描述用户界面的 HTML 页面通常都是在服务 ...
- 基于 gulp 的 fancybox 源码压缩
前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp ...
- Python进行大文件的备份
Python进行大文件的备份的思路:每次仅从原文件中读取指定字符的内容后写入新文件,然后循环操作. def copy_big_file(): # 接收用户输入的文件名 old_file = input ...
- 9.3 Django框架
Django 是一个非常流行的 Python Web 开发框架,它是完整且强大的,适用于构建大型 Web 应用.在这一章节中,我们将详细介绍 Django 的基本概念.组件和用法.为了便于理解,我们将 ...
- 华为云新一代分布式数据库GaussDB，给世界一个更优选择
摘要:与伙伴一起,共建繁荣开放的GaussDB数据库新生态. 本文分享自华为云社区<华为云新一代分布式数据库GaussDB,给世界一个更优选择>,作者:华为云头条. 6月7日,在华为全球智 ...
- CKS 考试题整理 （14）-启用API Server认证
Context 由 kubeadm 创建的cluster 的kubernetes API 服务器,出于测试目的, 临时配置允许未经身份验证和未经授权的访问,授予匿名用户 cluster-admin 的 ...