el-select下拉框 添加 el-checkbox 多选框

效果

vue

<el-select v-model="value" multiple style="width: 100%" popper-class="select-popover-class" placeholder="请选择试验项目"><el-option v-for="item in options" :key="item.value" :value="item.value":label="item.label" ><el-checkbox :value="options.includes(item.value)" :label="item.label"></el-checkbox></el-option>
</el-select><script>export default {data() {return {value: [],options: [{label: '选项一',value: 1},{label: '选项二',value: 2}]}}};
</script>  

css

<style lang="scss" scoped>
/* 控制全选按钮样式 */
.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;
}
</style>

参考

el-select下拉框 添加 el-checkbox 多选框，支持全选、取消全选