Vue3 Element-plus 封装Select下拉复选框选择器

废话不多说，样式如下，代码如下，需要自取

<template><el-selectv-model="selectValue"class="checkbox-select"multiple:placeholder="placeholder":style="{ width: width }"@change="changeSelect"><div class="checkboxWrapper"><el-checkbox v-model="checked"> 全选 </el-checkbox></div><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"><el-checkbox :model-value="selectValue.includes(item.value)">{{ item.label }}</el-checkbox></el-option></el-select>
</template><script setup lang="ts">
import { computed } from 'vue'
import { useVModel } from '@vueuse/core'interface Option {label: stringvalue: number
}interface Props {modelValue: number[]options: Option[]placeholder?: stringwidth?: string
}interface Emits {(e: 'update:modelValue', value: number[]): void(e: 'change', value: number[]): void
}const props = withDefaults(defineProps<Props>(), {placeholder: '请选择',width: '200px',
})const emit = defineEmits<Emits>()defineOptions({name: 'CheckboxSelect',
})// 使用useVModel处理数据同步
const selectValue = useVModel(props, 'modelValue', emit)// 计算全选状态
const checked = computed({get: () => {const resValues = props.options.map((item) => item.value)return selectValue.value.length === resValues.length},set: (value: boolean) => {const resValues = props.options.map((item) => item.value)if (!value) {// 如果checkbox为false，则为反选，选择数组为空emit('update:modelValue', [])} else {// 如果checkbox为true，则为全选，选择数组添加所有数据emit('update:modelValue', [...resValues])}},
})// 选择变化处理
const changeSelect = (val: number[]) => {emit('change', val)
}
</script><style scoped>
.checkbox-select {width: 100%;
}.checkboxWrapper {padding: 0px 20px;
}/* 选项复选框样式 */
:deep(.el-select-dropdown__item .el-checkbox) {width: 100%;margin: 0;
}:deep(.el-select-dropdown__item .el-checkbox .el-checkbox__label) {padding-left: 8px;
}
</style>

 <CheckboxSelectv-model="searchForm.statusList":options="statusOptions"placeholder="请选择状态"width="200px"@change="changeHandle"
/>// 搜索表单
const searchForm = reactive({statusList: [] as number[], // 多选数组
})// 状态选项
const statusOptions = ref([{ label: '启用', value: 1 },{ label: '禁用', value: 2 },
])// 选择变化处理
const changeHandle = (val: number[]) => {console.log(val, '状态选择变化')
}