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>