console
new Vue({
el: '#app',
data: {
data: [],
options: [
{
label: '选项1',
value: 1
},
{
label: '选项2',
value: 2
},
{
label: '选项3',
value: 3
}
]
},
computed: {
selectAll() {
if(this.data.length){
return this.data.length === this.options.length;
}
return false;
},
indeterminate() {
if(this.data.length){
return this.data.length !== this.options.length;
}
return false;
}
},
methods: {
selectAllHandle(bool) {
this.data = bool ? this.options.map(v => v.value) : [];
}
},
})
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js">
</script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
<div id="app">
<el-select v-model="data" multiple popper-class="select-popover-class">
<el-checkbox :value="selectAll" :indeterminate="indeterminate" @change="selectAllHandle">全选</el-checkbox>
<el-option
v-for="item in options"
:key="item.value"
:value="item.value"
:label="item.label" >
<el-checkbox :value="data.includes(item.value)" :label="item.label">
</el-option>
</el-select>
</div>
.select-popover-class .el-scrollbar__view > .el-checkbox{
padding: 5px 20px;
}
.select-popover-class .el-scrollbar__view > li .el-checkbox {
pointer-events: none;
}
.select-popover-class .el-scrollbar__view > li::after {
display: none;
}