vue实现简单的 element select下拉框 vue封装简单的下拉选择 vue下拉选择 vue select组件

最新推荐文章于 2025-06-09 09:01:41 发布

糖葫芦加冰

最新推荐文章于 2025-06-09 09:01:41 发布

阅读量3.4k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue element select select vue select 手动实现select vue实现select

本文链接：https://blog.youkuaiyun.com/weixin_38356321/article/details/96439847

本文介绍如何在Vue中使用Element UI的Select组件进行封装，详细讲解了代码结构、参数说明以及监听和事件处理，包括多选、单选的实现方式，并提供了示例代码和使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue实现简单的select下拉选择

看看效果

下面看看代码如何实现：

1.代码结构：

index.js文件注册全局组件

TySelect.vue文件

<template>
  <div class="ty-select" :style="{width:width}">
    <div class="select-type" @click="openSelect">
      <slot class="select-name" name="selectType"></slot>
      <label class="down-icon" :class={active:selectFlag}></label>
    </div>
    <div class="selectLists" :class="{active:selectFlag}" v-loading="loading">
      <ul v-if="tyMultiple">
        <li v-for="(v, i) in newOptions" :key="i" @click.stop="selectValue(v)">
          <input class="checkbox" type="checkbox" :checked="v.selectFlag" @click.stop="selectValue(v)">
          <p>{
  
  {v.name}}</p>
        </li>
      </ul>
      <ul v-else>
        <li  v-for="(v, i) in newOptions" :key="i" @click.stop="selectValue(v)">
          <input class="checkbox" type="radio" name="group" :checked="checkTag === null ? false : (checkTag.id === v.id ? true : false)" @click.stop="selectValue(v)">
          <p>{
  
  {v.name}}</p>
        </li>
      </ul>
      <div class="enter">
        <button @click="enter"