Shulou(Shulou.com)06/03 Report--

This article is about how elementUI implements drop-down options plus checkboxes. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Drop down and add the checkbox

The effect is as follows:

The package is as follows:

{{item.label}} {{value}} export default {name: 'SelectChecked', components: {}, props: {options: {type: Array}}, data () {return {value: []}} Methods: {/ / the 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)}, / / trigger removeTag (value) {this.options.forEach ((elm, idx) = > {if (elm.value = = value) {elm.check = false}}) this.$emit (' selectedVal') when the tag is removed in multi-selection mode This.value)}}. Select-checked {.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {content:'' } .el-checkbox {width: 100%; padding: 030px; .el-checkbox__label {margin-left: 20px;} .el-select-dropdown__item {padding: 0;}}

Use in the page

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 Fried, label:' Oyster Fried', check: false}, {value: '004', label: 'Longxu Noodle', 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 () {}}

Upgrade-add all options {{item.label}} {{value}} export default {name: 'SelectChecked', components: {}, props: {options: {type: Array}, data () {return {value: []}} Methods: {/ / the 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)}, / / trigger removeTag (value) {if (value = = 'all') {this.options.forEach ((elm)) when removing tag in multiple selection mode 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)}}. Select-checked {.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {content:'' } .el-checkbox {width: 100%; padding: 030px; .el-checkbox__label {margin-left: 20px;} .el-select-dropdown__item {padding: 0;}}

Used in the component

Import SelectChecked from'@ / components/Select/SelectChecked'export default {name: 'record', components: {SelectChecked}, data () {return {options: [{value:' all', label: 'all', check: false}, {value: '001 cake, label:' Golden Cake' Check: false}, {value: '002milk, label:' double skin milk', check: false}, {value: '003cheese, label:' fried oyster', check: false}, {value: '004' Label: 'Longxu Noodle', check: false}, {value: '005Yuan, label:' Beijing Roast Duck', check: false}], value1: []}}, watch: {}}, computed: {} Methods: {selectedVal (value) {/ / Note if there are all of them here To 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 () {}. 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;}}

The effect is as follows

Demand revision and perfection

Thanks to Brother long for his guidance and help.

All {{item}} 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, / / this value defaults to false When you enter the page, the first time you bind the value, the monitoring will not be performed immediately. The operations in handler / / deep: true, / / deep depth},}, computed: {selected () {if (this.selectedOptions.length = Object.keys (this.optionsData). Length) {return [']} else {return this.selectedOptions}} are performed only when the data is changed. 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}}. Select-checked {.el-select-dropdown.is-multiple. El-select-dropdown__item.selected::after {content:'' } .el-checkbox {width: 100%; padding: 030px; .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:',';}

The component uses:

Import Select from'@ / components/Select/Select'export default {name: 'record', components: {Select}, data () {return {optionsData: {' 001: 'Golden Cake', '002': 'double-skin Milk', '003': 'Oyster Fried', '004': 'Longxu Noodle', '005Qing:' Beijing Roast Duck'} }}, watch: {}, computed: {}, methods: {selected (value) {console.log (value) Let str = value.join () console.log (str) / / Note if (value.includes ('') | | value.length = 0) {console.log (Object.keys (this.optionsData). Join ()) if the value in the data is empty string and none when the option is all. }}, created () {console.log ('created-record')}, activated () {console.log (' created-record')}, mounted () {}}

The effect is as follows:

Since the above is object format data, it may be inconvenient to operate, so I reorganize the array object format data as follows

All {{item.label}} 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, / / Deep snooping}} 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 take out the subscript Can be encapsulated and written out Array.prototype.getArrayIndex = function (obj) {for (var I = 0) I

{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)}}. Select-checked {.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {content:'' } .el-checkbox {width: 100%; padding: 030px; .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:',';}

Used in the component

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 Fried, label:' Oyster Fried', check: true}, {value: '004', label: 'Longxu Noodle', 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 () {}}

The effect is as follows:

Thank you for reading! This is the end of the article on "how to implement the drop-down option plus multiple checkboxes in elementUI". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.