vue使用el-select下拉框自定义复选框

在 Vue 开发中,高效且美观的组件能极大地提升用户体验和开发效率。在vue中使用elementplus 的 el-select下拉框实现了一个自定义的多选下拉框组件。

一、代码功能概述

这段代码创建了一个可多选的下拉框组件,通过el-select和el-checkbox-group结合的方式,实现了多个选项的选择功能。用户可以从给定的选项中选择一个或多个,并且可以通过selectChange方法实时更新已选择的值。

二、代码结构解析

  1. 模板部分
javascript 复制代码
<template>
    <el-select
      v-model="selectData"
      multiple
      class="select-popover-class"
      @change="selectChange">
      <el-checkbox-group :model-value="selectData">
        <el-option
          v-for="item in options"
          :key="item.value"
          :value="item.value"
          :label="item.label">
          <el-checkbox   :label="item.label" :value="item.value" />
        </el-option>
      </el-checkbox-group>
    </el-select>
</template>

在模板中,使用了el-select组件并设置了v-model为selectData,表示选中的值。设置multiple属性允许用户进行多选。同时,通过@change事件绑定了selectChange方法,以便在选择发生变化时进行处理。内部使用el-checkbox-group和el-option结合的方式,遍历options数组生成每个选项,每个选项又包含一个el-checkbox。

  1. 脚本部分
javascript 复制代码
<script setup>
import { ref, computed } from 'vue'

const selectData = ref([1, 2])
const options = ref([
  { label: '选项1', value: 1 },
  { label: '选项2', value: 2 },
  { label: '选项3', value: 3 }
])
const flag = ref(true)

const selectChange = value => {
  selectData.value = value
}
</script>

selectData是一个响应式变量,初始值为[1, 2],表示默认选中的选项。options是一个包含选项对象的数组,每个对象有label和value属性,分别用于显示的文本和实际的值。flag是另一个响应式变量,其具体用途在这段代码中不太明确。selectChange方法用于更新selectData的值。

运行效果:

相关推荐
江城开朗的豌豆1 分钟前
Vue图片懒加载:极简方案 vs 兼容全攻略
前端·javascript·vue.js
oil欧哟5 分钟前
🧐 AI 批量检查数千份技术文档,如何实现高效文档纠错?
前端·人工智能·ai编程
江城开朗的豌豆6 分钟前
Vue组件data必须用函数?这个设计暗藏玄机!
前端·javascript·vue.js
前端小巷子14 分钟前
web域名解析
前端·javascript·面试
LaoZhangAI15 分钟前
沉浸式翻译API深度解析:500万用户的翻译神器如何配置[2025完整指南]
前端·后端
然我21 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆22 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder30 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang37 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol1 小时前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源