el-select和el-checkBox实现下拉菜单全选功能

el-select 和 el-checkbox 实现下拉菜单全选功能

示例代码：

<el-selectpopper-class="select-container"v-model="ids"placeholder="请选择目标":multiple-limit="20"multiplefilterablecollapse-tagsclass="wd400"size="medium"><el-option disabled :value="-1" v-if="optionList.length > 1"><el-checkboxv-model="allCheck":indeterminate="isIndeterminate"@change="handleCheckAllChange">全选</el-checkbox></el-option><el-optionv-for="item in optionList"key="item.id":label="item.name":value="item.id"disabled><el-checkbox-groupv-model="ids"@click.native.stop=""@change="handleCheckedChange"><el-checkbox :label="item.id"><span class="elk-option">{{ item.name }}</span></el-checkbox></el-checkbox-group></el-option>
</el-select>

data:

data() {return {ids:[],optionList:[{id:1, name:"目标1"},{id:2, name:"目标2"},{id:3, name:"目标3"},{id:4, name:"目标4"}],allCheck: false,isIndeterminate: false,}
}

方法：

// 目标选择
handleCheckedChange(value) {let checkedCount = value.length;let allCount = this.optionList.length;this.allCheck = checkedCount === allCount;this.isIndeterminate = checkedCount > 0 && checkedCount < allCount;
},// 目标多选
handleCheckAllChange(val) {// console.log(val)this.ids = val ? this.optionList.map(item=>{return item.id}) : []this.isIndeterminate = false;
}

样式：

.select--container {.el-select-dropdown__item {.el-checkbox {display: flex;align-items: center;height: 40px;}&.is-disabled {cursor: auto !important;}&:hover {background: #fff !important;}&.selected {&.hover {background: #F5F7FA !important;}}}
}