elementUI实现下拉选项加多选框的示例代码
更新时间:2021年10月17日 12:00 点击:1912
因产品需求和UI样式调整,和element自带的下拉多选有冲突,索性自己尝试修改如下:
下拉加多选框
效果如下图:
封装如下:
<template> <div class="select-checked"> <!-- 下拉加多选框 --> <el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="removeTag" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > <el-checkbox v-model="item.check" @change="isChecked(item)"> {{ item.label }} </el-checkbox> </el-option> </el-select> {{ value }} </div> </template> <script> export default { name: 'SelectChecked', components: {}, props: { options:{ type: Array } }, data() { return { value: [] } }, methods: { // 多选框触发 isChecked(item) { if (item.check && this.value.indexOf(item.value) == -1) { this.value.push(item.value) } else if (!item.check) { this.value.forEach((elm, idx) => { if (elm == item.value) { this.value.splice(idx, 1) } }) } this.$emit('selectedVal', this.value) }, // 多选模式下移除tag时触发 removeTag(value) { this.options.forEach((elm, idx) => { if (elm.value == value) { elm.check = false } }) this.$emit('selectedVal', this.value) } } } </script> <style lang="scss"> .select-checked { .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { content: ''; } .el-checkbox { width: 100%; padding: 0 30px; .el-checkbox__label { margin-left: 20px; } } .el-select-dropdown__item { padding: 0; } } </style>
页面中使用
<!-- --> <template> <div class="content-box"> <div class="container"> <SelectChecked :options="options" @selectedVal="selectedVal" /> </div> </div> </template> <script> import SelectChecked from '@/components/Select/SelectChecked' export default { name: 'record', components: { SelectChecked }, data() { return { options: [ { value: '001', label: '黄金糕', check: false }, { value: '002', label: '双皮奶', check: false }, { value: '003', label: '蚵仔煎', check: false }, { value: '004', label: '龙须面', check: false }, { value: '005', label: '北京烤鸭', check: false } ], } }, watch: { }, computed: {}, methods: { selectedVal(value){ console.log(111, value); // 获取子组件选项的值 } }, created() { console.log('created-record') }, activated() { console.log('created-record') }, mounted() {} } </script> <style lang="scss"> </style>
升级—添加全部选项
<template> <div class="select-checked"> <!-- 下拉加多选框 --> <el-select v-model="value" multiple placeholder="请选择" :popper-append-to-body="false" @remove-tag="removeTag" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > <el-checkbox v-model="item.check" @change="isCheck(item)"> {{ item.label }} </el-checkbox> </el-option> </el-select> {{ value }} </div> </template> <script> export default { name: 'SelectChecked', components: {}, props: { options: { type: Array } }, data() { return { value: [] } }, methods: { // 多选框触发 isCheck(item) { if (item.check && item.value == 'all') { this.value = [] this.options.forEach(element => { element.check = true this.value.push(element.value) }) } else if (!item.check && item.value == 'all') { this.value = [] this.options.forEach(element => { element.check = false }) } if ( item.check && this.value.indexOf(item.value) == -1 && item.value !== 'all' ) { this.value.forEach((elm, idx) => { if (elm == 'all') { this.value.splice(idx, 1) } }) this.value.push(item.value) if (this.value.length == this.options.length - 1) { this.options[0].check = true this.value.unshift('all') } else { this.options[0].check = false } } else if (!item.check && item.value !== 'all') { this.options[0].check = false this.value.forEach((elm, idx) => { if (elm == item.value || elm == 'all') { this.value.splice(idx, 1) } }) } this.$emit('selectedVal', this.value) }, // 多选模式下移除tag时触发 removeTag(value) { if (value == 'all') { this.options.forEach((elm, idx) => { elm.check = false }) this.value = [] } else { this.options.forEach((elm, idx) => { if (elm.value == value || elm.value == 'all') { elm.check = false } }) } this.$emit('selectedVal', this.value) } } } </script> <style lang="scss"> .select-checked { .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { content: ''; } .el-checkbox { width: 100%; padding: 0 30px; .el-checkbox__label { margin-left: 20px; } } .el-select-dropdown__item { padding: 0; } } </style>
组件中使用
<!-- --> <template> <div class="content-box select-checked"> <div class="container"> <SelectChecked :options="options" @selectedVal="selectedVal" /> </div> </div> </template> <script> import SelectChecked from '@/components/Select/SelectChecked' export default { name: 'record', components: { SelectChecked }, data() { return { options: [ { value: 'all', label: '全部', check: false }, { value: '001', label: '黄金糕', check: false }, { value: '002', label: '双皮奶', check: false }, { value: '003', label: '蚵仔煎', check: false }, { value: '004', label: '龙须面', check: false }, { value: '005', label: '北京烤鸭', check: false } ], value1: [] } }, watch: { } }, computed: {}, methods: { selectedVal(value){ // 注意这里如果有全部的话,要去掉全部 value.forEach((item,idx )=>{ if(item == 'all'){ value.splice(idx, 1) } }) console.log(111, value); } }, created() { console.log('created-record') }, activated() { console.log('created-record') }, mounted() {} } </script> <style lang="scss"> .select-checked { .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { content: ''; } .el-checkbox { width: 100%; padding: 0 30px; .el-checkbox__label { margin-left: 20px; } } .el-select-dropdown__item { padding: 0; } } </style>
效果如下图
需求改版完善
感谢龙哥指导和帮忙
<template> <div class="select-checked"> <el-select :value="selected" multiple placeholder="请选择" :popper-append-to-body="false" > <el-option :value="''" label="全部" class="multiple"> <el-checkbox v-model="optionsAll" @change="handleoptionsAllChange"> 全部 </el-checkbox> </el-option> <el-option class="multiple" :value="key" :label="item" v-for="(item, key) in optionsData" :key="key" > <el-checkbox :value="selectedOptions.includes(key)" @change="handleTaskItemChange(key)" > {{ item }} </el-checkbox> </el-option> </el-select> </div> </template> <script> export default { name: 'Select', components: {}, props: { options: { type: Object } }, data() { return { optionsData: {}, optionsAll: true, selectedOptions: [], } }, watch: { options: { handler(newVal) { console.log(newVal) this.optionsData = newVal this.selectedOptions = Object.keys(newVal) }, immediate: true, // 该值默认是false,在进入页面时,第一次绑定值,不会立刻执行监听,只有数据发生改变才会执行handler中的操作 // deep: true, // deep 深度 }, }, computed: { selected() { if ( this.selectedOptions.length === Object.keys(this.optionsData).length ) { return [''] } else { return this.selectedOptions } } }, methods: { handleoptionsAllChange(isAll) { if (isAll) { this.selectedOptions = Object.keys(this.optionsData) } else { this.selectedOptions = [] } }, handleTaskItemChange(key) { if (this.selectedOptions.includes(key)) { this.selectedOptions.splice(this.selectedOptions.indexOf(key), 1) } else { this.selectedOptions.push(key) } this.optionsAll = this.selectedOptions.length === Object.keys(this.optionsData).length } } } </script> <style lang="scss"> .select-checked { .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { content: ''; } .el-checkbox { width: 100%; padding: 0 30px; .el-checkbox__label { margin-left: 20px; } } .el-select-dropdown__item { padding: 0; } .el-tag__close, .el-icon-close { display: none; } .el-tag.el-tag--info { background: transparent; border: 0; } .el-select { .el-select__tags { flex-wrap: nowrap; overflow: hidden; } .el-tag { background-color: #fff; border: none; color: #606266; font-size: 13px; padding-right: 0; & ~ .el-tag { margin-left: 0; } &:not(:last-child)::after { content: ','; } } } } </style>
组件使用:
<!-- --> <template> <div class="content-box select-checked"> <div class="container"> <Select :options="optionsData" @selected="selected" /> </div> </div> </template> <script> import Select from '@/components/Select/Select' export default { name: 'record', components: { Select }, data() { return { optionsData: { '001': '黄金糕', '002': '双皮奶', '003': '蚵仔煎', '004': '龙须面', '005': '北京烤鸭' }, } }, watch: {}, computed: {}, methods: { selected(value){ console.log(value); let str = value.join() console.log(str) // 注意选项为全部时数据里面的值为空字符串和无的情况 if(value.includes('') || value.length === 0){ console.log(Object.keys(this.optionsData).join()); } } }, created() { console.log('created-record') }, activated() { console.log('created-record') }, mounted() {} } </script> <style lang="scss" scoped> </style>
效果如下:
因上面是对象格式数据,操作起来可能会不方便,我重新整理了一下数组对象格式数据,如下
<template> <div class="select-checked"> <el-select :value="selected" :class="{ all: optionsAll }" multiple placeholder="请选择" :popper-append-to-body="false" > <el-option :value="''" label="全部" class="multiple"> <el-checkbox v-model="optionsAll" @change="handleoptionsAllChange"> 全部 </el-checkbox> </el-option> <el-option class="multiple" :value="item.value" :label="item.label" v-for="(item, key) in optionsData" :key="key" > <el-checkbox v-model="item.check" @change="handleTaskItemChange(item)"> {{ item.label }} </el-checkbox> </el-option> </el-select> </div> </template> <script> export default { name: 'Select', components: {}, props: { options: { type: Array } }, data() { return { optionsData: [], optionsAll: true, selectedOptions: [] } }, watch: { options: { handler(newVal) { this.optionsData = newVal newVal.forEach(item => { if (item.check) { this.selectedOptions.push(item.value) } }) }, immediate: true // deep: true, // 深度监听 } }, computed: { selected() { if (this.selectedOptions.length === this.options.length) { return [''] } else { return this.selectedOptions } } }, methods: { handleoptionsAllChange(isAll) { if (isAll) { this.optionsData.forEach((elm, idx) => { elm.check = true this.selectedOptions.push(elm.value) }) } else { this.optionsData.forEach((elm, idx) => { elm.check = false }) this.selectedOptions = [] } this.$emit('selected',this.selectedOptions) }, handleTaskItemChange(item) { // console.log(item) // 这里是取出下标的方法,可以封装写出去 Array.prototype.getArrayIndex = function (obj) { for (var i = 0; i < this.length; i++) { if (this[i] === obj) { return i } } return -1 } if (!item.check) { this.optionsData.forEach((elm, idx) => { if (item.value == elm.value) { let index = this.selectedOptions.getArrayIndex(item.value) this.selectedOptions.splice(index, 1) } }) } else { this.optionsData.forEach((elm, idx) => { if (item.value == elm.value) { this.selectedOptions.push(elm.value) } }) } this.optionsAll = this.selectedOptions.length === this.optionsData.length // console.log(this.selectedOptions, this.optionsData) this.$emit('selected', this.selectedOptions) } } } </script> <style lang="scss"> .select-checked { .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after { content: ''; } .el-checkbox { width: 100%; padding: 0 30px; .el-checkbox__label { margin-left: 20px; } } .el-select-dropdown__item { padding: 0; } .el-tag__close, .el-icon-close { display: none; } .el-tag.el-tag--info { background: transparent; border: 0; } .el-select { .el-select__tags { flex-wrap: nowrap; overflow: hidden; } .el-tag { background-color: #fff; border: none; color: #606266; font-size: 13px; padding-right: 0; & ~ .el-tag { margin-left: 0; } &:not(:last-child)::after { content: ','; } } } } </style>
组件中使用
<!-- --> <template> <div class="content-box select-checked"> <div class="container"> <Select :options="options" @selected="selected"/> </div> </div> </template> <script> import SelectTest from '@/components/Select/Select' export default { name: 'record', components: { Select, }, data() { return { options: [ { value: '001', label: '黄金糕', check: true }, { value: '002', label: '双皮奶', check: true }, { value: '003', label: '蚵仔煎', check: true }, { value: '004', label: '龙须面', check: true }, { value: '005', label: '北京烤鸭', check: true } ], } }, watch: { }, computed: {}, methods: { selected(value){ console.log(value); } }, created() { console.log('created-record') }, activated() { console.log('created-record') }, mounted() {} } </script>
效果如下:
到此这篇关于elementUI实现下拉选项加多选框的示例代码的文章就介绍到这了,更多相关element 下拉选项加多选框内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
解决Element-ui el-table合计行 show-summary 不显示的问题
有时候需要在table的底部有合计,这时候官方给的是在table里设置,show-summary就可以了但是给table加了一个固定高度的话,就不显示了,打开控制台可以看到这个合计是存在的那么需...2020-12-11vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了Element PageHeader页头的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要为大家详细介绍了vue+element ui实现锚点定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-29
- 本文主要介绍了vue+element实现动态换肤的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-07
- 这篇文章主要介绍了vue中如何使用element的日历组件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30
- 这篇文章主要介绍了Element图表初始大小及窗口自适应实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-10
- 本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-02
- 这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-27
- 这篇文章主要介绍了Element Card 卡片的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-26
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
这篇文章主要介绍了Element-ui 自带的两种远程搜索(模糊查询)用法讲解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-29- 这篇文章主要介绍了Element-ui upload上传文件限制的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-25
- 这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-19
- 这篇文章主要介绍了vue element后台鉴权流程分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-10
- 本文主要介绍了Element的穿梭框数据量大时点击全选卡顿的解决方案,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-31
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)
这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16- 这篇文章主要介绍了vue element el-transfer增加拖拽功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-16
- 本文主要介绍了Element中select多数据加载优化的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-27