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

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

cpp 复制代码

<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>

cpp 复制代码

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