<template><div class="container"><el-selectv-model="choosedList"clearablemultiplecollapse-tagsplaceholder="请选择"@change="select_Change"><div style="padding: 0 20px; line-height: 34px"><el-checkboxv-model="chooseAll":indeterminate="indeterminate"@change="chooseAll_Change">全选</el-checkbox></div><el-optionv-for="item in allList":key="item.value":label="item.label":value="item.value"></el-option></el-select></div>
</template>
<script>
export default {data() {return {chooseAll: false,indeterminate: false,choosedList: [],allList: [{label: "精选好物",value: "1",},{label: "炫酷动漫",value: "2",},{label: "贺岁影院",value: "3",},],};},methods: {select_Change(newSelect) {if (newSelect.length === this.allList.length) {this.chooseAll = true;} else {this.chooseAll = false;}},chooseAll_Change() {if (this.choosedList.length < this.allList.length) {this.choosedList = this.allList.map((item) => {return item.value;});this.chooseAll = true;} else {this.choosedList = [];this.chooseAll = false;}},},
};
</script><style lang="scss" scoped>
.container {margin: 30px;
}
</style>