app网站设计制作_长春建工集团官网_网站代运营价格_百度资源搜索

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

<el-selectv-model="selectDevice"multiplecollapse-tags:multiple-limit="5"style="width: 200px"popper-class="select-popover-class"
><el-optionv-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-selectv-model="selectDevice"multiplecollapse-tags:multiple-limit="5"style="width: 200px"popper-class="select-popover-class"><el-optionv-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>