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
Web page HTML code explanation: ordered list and unordered list
In this section, we will learn about list element...
js regular expression lookahead and lookbehind and non-capturing grouping
Table of contents Combining lookahead and lookbeh...
How to use VIM editor in Linux
As a powerful editor with rich options, Vim is lo...
The difference between ${param} and #{param} in MySQL
The parameter passed by ${param} will be treated ...
About the layout method of content overflow in table
What is content overflow? In fact, when there is ...
Solve the problem of docker images disappearing
1. Mirror images disappear in 50 and 93 [root@h50...
Solve the error problem of warnings potentially fixable with the `--fix` option when running a Vue project
Problem: vue-cil3 runs with warnings potentially ...
Detailed examples of the difference between methods watch and computed in Vue.js
Table of contents Preface introduce 1. Mechanism ...
How to use video.js in vue to play m3u8 format videos
Table of contents 1. Installation 2. Introducing ...
In-depth explanation of nginx location priority
location expression type ~ indicates to perform a...
MySQL 8.0.19 installation and configuration method graphic tutorial
This article records the installation and configu...
Comparison of mydumper and mysqldump in mysql
If you only want to back up a few tables or a sin...
Detailed steps for installing rockerChat in docker and setting up a chat room
Comprehensive Documentation github address https:...
Implementation of JavaScript downloading linked images and uploading them
Since we are going to upload pictures, the first ...
Solve the Chinese garbled problem of mysql5.5 database command line under Windows 10
After resetting the system, the MySQL database th...