ElementUI implements sample code for drop-down options and multiple-select boxes
|
Due to product requirements and UI style adjustments, there is a conflict with the element's built-in drop-down multi-select function. I simply tried to modify it myself as follows: Drop-down multiple-select boxThe effect is as follows:
The package is as follows:
<template>
<div class="select-checked">
<!-- Drop down to add multiple selection box -->
<el-select
v-model="value"
multiple
placeholder="Please select"
: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: {
//Multiple checkbox triggers 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)
},
// Triggered when removing a tag in multi-select mode 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>
Used in the page
<!-- -->
<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: 'Golden Cake',
check: false
},
{
value: '002',
label: 'Double skin milk',
check: false
},
{
value: '003',
label: 'Oyster Omelette',
check: false
},
{
value: '004',
label: 'Dragon beard noodles',
check: false
},
{
value: '005',
label: 'Beijing Roast Duck',
check: false
}
],
}
},
watch: { },
computed: {},
methods: {
selectedVal(value){
console.log(111, value); // Get the value of the subcomponent option}
},
created() {
console.log('created-record')
},
activated() {
console.log('created-record')
},
mounted() {}
}
</script>
<style lang="scss">
</style>
Upgrade - add all options
<template>
<div class="select-checked">
<!-- Drop down to add multiple selection box -->
<el-select
v-model="value"
multiple
placeholder="Please select"
: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: {
//Multiple checkbox triggers 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)
},
// Triggered when removing a tag in multi-select mode 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>
Used in components
<!-- -->
<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: 'All',
check: false
},
{
value: '001',
label: 'Golden Cake',
check: false
},
{
value: '002',
label: 'Double skin milk',
check: false
},
{
value: '003',
label: 'Oyster Omelette',
check: false
},
{
value: '004',
label: 'Dragon beard noodles',
check: false
},
{
value: '005',
label: 'Beijing Roast Duck',
check: false
}
],
value1: []
}
},
watch:
}
},
computed: {},
methods: {
selectedVal(value){
// Note that if there are all, remove all 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>
The effect is as follows
Demand revision and improvementThanks for your guidance and help
<template>
<div class="select-checked">
<el-select
:value="selected"
multiple
placeholder="Please select"
:popper-append-to-body="false"
>
<el-option :value="''" label="All" class="multiple">
<el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">
All</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, // The default value is false. When entering the page, the first binding value will not be listened immediately. The operation in the handler will only be executed when the data changes. // deep: true, // deep depth},
},
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>
Component usage:
<!-- -->
<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': 'Golden Cake',
'002': 'Double Skin Milk',
'003': 'Oyster Omelette',
'004': 'Dragon Beard Noodles',
'005': 'Beijing Roast Duck'
},
}
},
watch: {},
computed: {},
methods: {
selected(value){
console.log(value);
let str = value.join()
console.log(str)
// Note that when the option is "all", the value in the data is an empty string or none 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>
The effect is as follows:
Because the above is object format data, it may be inconvenient to operate. I reorganized the array object format data as follows
<template>
<div class="select-checked">
<el-select
:value="selected"
:class="{ all: optionsAll }"
multiple
placeholder="Please select"
:popper-append-to-body="false"
>
<el-option :value="''" label="All" class="multiple">
<el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">
All</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, // depth monitoring}
},
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)
// Here is the method to get the index, which can be encapsulated and written out 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>Used in components
<!-- -->
<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: 'Golden Cake',
check: true
},
{
value: '002',
label: 'Double skin milk',
check: true
},
{
value: '003',
label: 'Oyster Omelette',
check: true
},
{
value: '004',
label: 'Dragon beard noodles',
check: true
},
{
value: '005',
label: 'Beijing Roast Duck',
check: true
}
],
}
},
watch:
},
computed: {},
methods: {
selected(value){
console.log(value);
}
},
created() {
console.log('created-record')
},
activated() {
console.log('created-record')
},
mounted() {}
}
</script>
The effect is as follows:
This is the end of this article about the sample code of elementUI implementing drop-down options and multiple-select boxes. For more related element drop-down options and multiple-select boxes, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: HTML table markup tutorial (10): cell padding attribute CELLPADDING
>>: HTML table tag tutorial (11): horizontal alignment attribute ALIGN
Recommend
Implementation of installing and uninstalling CUDA and CUDNN in Ubuntu
Table of contents Preface Install the graphics dr...
How does the composite index of MySQL take effect?
Table of contents background Understanding compos...
Which one should I choose between MySQL unique index and normal index?
Imagine a scenario where, when designing a user t...
How to separate static and dynamic state by combining Apache with Tomcat
Experimental environment Apache and Tomcat are bo...
A simple way to restart QT application in embedded Linux (based on QT4.8 qws)
Application software generally has such business ...
Solve the problem of docker's tls (ssl) certificate expiration
Problem phenomenon: [root@localhost ~]# docker im...
mysql 8.0.12 winx64 download and installation tutorial
MySQL 8.0.12 download and installation tutorial f...
An article to quickly understand Angular and Ionic life cycle and hook functions
Table of contents Angular accomplish Calling orde...
Sample code for implementing water drop ripple animation button effect with CSS+JS
The code looks like this: <!DOCTYPE html> &...
Detailed explanation of .bash_profile file in Linux system
Table of contents 1. Environment variable $PATH: ...
Use thead, tfoot, and tbody to create a table
Some people use these three tags in a perverted wa...
A tutorial on how to install, use, and automatically compile TypeScript
1. Introduction to TypeScript The previous articl...
TypeScript installation and use and basic data types
The first step is to install TypeScript globally ...
Detailed explanation of how to easily switch CSS themes
I recently added a very simple color scheme (them...
Oracle VM VirtualBox installation of CentOS7 operating system tutorial diagram
Table of contents Installation Steps Environment ...