<template>
<div class="container">
<el-select
v-model="choosedList"
clearable
multiple
collapse-tags
placeholder="请选择"
@change="select_Change"
>
<div style="padding: 0 20px; line-height: 34px">
<el-checkbox
v-model="chooseAll"
:indeterminate="indeterminate"
@change="chooseAll_Change"
>全选</el-checkbox
>
</div>
<el-option
v-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>
