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, '状态选择变化')
}
相关推荐
gnip12 分钟前
js上下文
前端·javascript
中草药z12 分钟前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
世伟爱吗喽1 小时前
threejs入门学习日记
前端·javascript·three.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
小浣熊喜欢揍臭臭2 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
乖女子@@@2 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js
F2E_Zhangmo2 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
念念不忘 必有回响2 小时前
js设计模式-装饰器模式
javascript·设计模式·装饰器模式
weixin_584121432 小时前
vue3+ts导出PDF
javascript·vue.js·pdf
尚学教辅学习资料3 小时前
Ruoyi-vue-plus-5.x第五篇Spring框架核心技术:5.1 Spring Boot自动配置
vue.js·spring boot·spring