el-select的下拉选择框插入el-checkbox

el-check注意这里要使用model-value绑定数据

<el-select v-model="selectDevice" multiple collapse-tags :multiple-limit="5" style="width: 200px" popper-class="select-popover-class" > <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" > <el-checkbox :model-value="selectDevice.includes(item.value)"> {{ item.label }} </el-checkbox> </el-option> </el-select>

css样式处理：

/* 控制全选按钮样式 */ .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; }

完整代码：

<template> <div> <el-select v-model="selectDevice" multiple collapse-tags :multiple-limit="5" style="width: 200px" popper-class="select-popover-class" > <el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" > <el-checkbox :model-value="selectDevice.includes(item.value)"> {{ item.label }} </el-checkbox> </el-option> </el-select> </div> </template> <script setup lang="ts"> import { ref } from "vue"; const selectDevice = ref<Array<string>>([]); const deviceList = ref([ { value: "1", label: "设备1", }, { value: "2", label: "设备2", }, { value: "3", label: "设备3", }, { value: "4", label: "设备4", }, ]); </script> <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>