Select all from the El select drop-down box

Ma Yuxia 2021-09-15 10:28:19

el-select Select multiple items from the drop-down box to select all items

When writing a function, I found el-select Support multiple choices , But it doesn't support all elections , So speechless , Then realize it yourself ~ There are two ways , The second feeling is simpler

Method 1 : Add a... To the drop-down item 【 Future generations 】, Then there should be the following situations :

  1. When all drop-down options are checked ,【 Future generations 】 Automatically check ;
  2. When the drop-down option is checked , Click on 【 Future generations 】 after , Check all drop-down items ;
  3. When all drop-down options are unchecked , Click on 【 Future generations 】 after , All drop-down options are unchecked ;
  4. Drop down options and 【 Future generations 】 When they all choose , Uncheck any drop-down options ,【 Future generations 】 The button is not checked ;

The above is what I want to achieve , I'm so wordy ... Let's look at the code ...

html part :

<template>
<el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' @remove-tag='removeTag' placeholder=' Please select '>
<el-option label=' Future generations ' value=' Future generations ' @click.native='selectAll'></el-option>
<el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
</el-select>
</template>
 Copy code 

js part :

export default {
data() {
return {
selectedArray: [],
options: [
{ name: ' 11 ', label: 'one' },
{ name: ' 22 ', label: 'tow' },
{ name: ' Three three ', label: 'three' },
{ name: ' Four four ', label: 'four' },
{ name: ' Five five ', label: 'five' }
]
}
},
methods: {
selectAll() {
if (this.selectedArray.length < this.options.length) {
this.selectedArray = []
this.options.map((item) => {
this.selectedArray.push(item.name)
})
this.selectedArray.unshift(' Future generations ')
} else {
this.selectedArray = []
}
},
changeSelect(val) {
if (!val.includes(' Future generations ') && val.length === this.options.length) {
this.selectedArray.unshift(' Future generations ')
} else if (val.includes(' Future generations ') && (val.length - 1) < this.options.length) {
this.selectedArray = this.selectedArray.filter((item) => {
return item !== ' Future generations '
})
}
},
removeTag(val) {
if (val === ' Future generations ') {
this.selectedArray = []
}
}
}
}
 Copy code 

Look at the renderings :

image.png

Method 2 : Add a... Directly 【 Future generations 】 Check box , The functions implemented are the same as method 1
html part :

<template>
<el-select multiple collapse-tags v-model='selectedArray' @change='changeSelect' placeholder=' Please select '>
<el-checkbox v-model="checked" @change='selectAll'> Future generations </el-checkbox>
<el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
</el-select>
</template>
 Copy code 

js part :

export default {
data() {
return {
checked: false,
selectedArray: [],
options: [
{ name: ' 11 ', label: 'one' },
{ name: ' 22 ', label: 'tow' },
{ name: ' Three three ', label: 'three' },
{ name: ' Four four ', label: 'four' },
{ name: ' Five five ', label: 'five' }
]
}
},
methods: {
selectAll() {
this.selectedArray = []
if (this.checked) {
this.options.map((item) => {
this.selectedArray.push(item.name)
})
} else {
this.selectedArray = []
}
},
changeSelect(val) {
if (val.length === this.options.length) {
this.checked = true
} else {
this.checked = false
}
}
}
}
 Copy code 

css:

.el-checkbox {
text-align: right;
width: 100%;
padding-right: 10px;
}
 Copy code 

design sketch :

image.png

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15

2021-09-15

2021-09-15