实用指南：Vue3 Element-plus 封装Select下拉复选框选择器

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

<
template>
<el-select
v-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: string
        value: number
        }
        interface Props {
        modelValue: number[]
        options: Option[]
        placeholder?: string
        width?: 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>

<CheckboxSelect
v-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, '状态选择变化')
}