代码全在一个页面实现

效果：

 代码：

<template><div class="select-checked"><el-select:value="selected"multipleplaceholder="请选择":popper-append-to-body="false"><el-option :value="''" label="全部" class="multiple"><el-checkbox v-model="optionsAll" @change="handleoptionsAllChange">全部</el-checkbox></el-option><el-optionclass="multiple":value="item.value" :label="item.label"v-for="(item, key) in optionsData":key="key"><el-checkboxv-model="item.check"@change="handleTaskItemChange(item)">{{ item.label }}</el-checkbox></el-option></el-select></div>
</template><script>
export default {name: 'Select',components: {},data() {return {optionsData: [{value: '001',label: '火锅',check: true},{value: '002',label: '麻辣烫',check: true},{value: '003',label: '大盘鸡',check: true},],optionsAll: true,selectedOptions: [],}},watch: {optionsData: {handler(newVal) {console.log('newVal==',newVal);this.optionsData = newVal// this.selectedOptions = newValnewVal.forEach(item => { if (item.check) {this.selectedOptions.push(item.value) } })},immediate: true, // 该值默认是false，在进入页面时，第一次绑定值，不会立刻执行监听，只有数据发生改变才会执行handler中的操作},},computed: {selected() {if (this.selectedOptions.length ===this.optionsData.length) {return ['']} else {return this.selectedOptions}}},methods: {handleoptionsAllChange(isAll) {if (isAll) {this.optionsData.forEach((item) => {item.check = truethis.selectedOptions.push(item.value)})} else {this.optionsData.forEach((item) => {item.check = false})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) => {if (item.value == elm.value) {let index = this.selectedOptions.getArrayIndex(item.value)this.selectedOptions.splice(index, 1)}})} else {this.optionsData.forEach((elm) => {if (item.value == elm.value) {this.selectedOptions.push(elm.value)}})}this.optionsAll = this.selectedOptions.length === 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>