vue3+element下拉多选框组件

news2025/4/4 23:21:50

在这里插入图片描述
在这里插入图片描述

<!-- 下拉多选 -->
<template>
  <div class="select-checked">
    <el-select v-model="selected" :class="{ all: optionsAll, hidden: selectedOptions.data.length < 2 }" multiple
      placeholder="请选择" :popper-append-to-body="false" collapse-tags popper-class="select-popper">
      <template v-if="selectedOptions.data.length > 1" #prefix>
        <div class="multi">(多选) x {{ selectedOptions.data.length }}</div>
      </template>
      <el-option class="multiple" :value="item.value" :label="item.label" v-for="(item, key) in optionsData.data"
        :key="key">
        <el-checkbox v-model="item.check" @change="handleTaskItemChange(item)" style="width: 100%;">
          {{ item.label }}
        </el-checkbox>
      </el-option>
      <div class="is-all">
        <div @click="handleOptionsAllChange(true)">全选</div>
        <div @click="handleOptionsAllChange(false)">反选</div>
      </div>
    </el-select>
  </div>
</template>


<script setup>
import { ref, reactive, computed, watch, defineProps, onMounted } from 'vue'

let props = defineProps({
  options: {
    type: Array,
    required: true
  }
})

let optionsData = reactive({ data: [] })

let selectedOptions = reactive({ data: [] })

let optionsAll = ref(false)

const emit = defineEmits(['selected']);

watch(() => props.options, (newVal) => {
  optionsData.data = newVal;
  let checkedData = newVal.filter((item) => item.check);
  selectedOptions.data = checkedData.map((item) => item.value);
  optionsAll.value = checkedData.length === newVal.length;
}, { immediate: true })

onMounted(() => {
  // 在控件载入时触发父级的selected方法
  emit('selected', selectedOptions.data);
})

const selected = computed({
  get() {
    return selectedOptions.data.length > props.options.length ? [''] : selectedOptions.data;
  },
  set(value) {
    selectedOptions.data = value;
  }
})

const handleOptionsAllChange = (isAll) => {
  optionsData.data.forEach((elm) => {
    elm.check = isAll;
  });
  selectedOptions.data = isAll ? optionsData.data.map((item) => item.value) : [];
  emit('selected', selectedOptions.data);
}

const handleTaskItemChange = (item) => {
  if (!item.check) {
    selectedOptions.data = selectedOptions.data.filter((value) => value !== item.value);
  } else {
    selectedOptions.data.push(item.value);
  }
  optionsAll = selectedOptions.data.length === optionsData.data.length;
  emit('selected', selectedOptions.data);
}

</script>

<style lang="scss">
.select-checked {
  width: 420px;
  height: 30px;

  .el-input {
    width: 420px;
    height: 30px;
  }

  // tag删除图标
  .el-tag__close,
  .el-icon-close {
    display: none;
  }

  // 标签tag背景
  .el-tag.el-tag--info {
    background: transparent;
    border: 0;
    display: none;
  }

  // 第一个显示名称

  .hidden {
    .el-tag.is-closable.el-tag--default {
      display: block;
      line-height: 30px;
      padding-left: 15px;
      font-weight: 400;
      color: #333333;
    }
  }
}

.is-all {
  display: flex;

  div {
    cursor: pointer;
    margin: 6px 10px;
    transition: 0.2s;

    &:hover {
      opacity: .7;
    }
  }
}

.multi {
  font-size: 12px;
  font-weight: 400;
  color: #333333;
}
</style>
<style>
.el-select-dropdown.is-multiple.el-select-dropdown__item.selected::after {
  content: none;
}
</style>

使用:

<selectMulti :options="options" @selected="selected"></selectMulti>


let options = [
  {
    value: '001',
    label: '黄金糕',
    check: false
  },
  {
    value: '002',
    label: '双皮奶',
    check: false
  },
  {
    value: '003',
    label: '蚵仔煎',
    check: false
  },
  {
    value: '004',
    label: '龙须面',
    check: false
  },
  {
    value: '005',
    label: '北京烤鸭',
    check: false
  }
]


const selected = (value) => {
  console.log(value);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/911621.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++信息学奥赛1129:统计数字字符个数

这段代码的功能是计算一个输入字符串中的数字字符个数。 解析注释后的代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {string arr; // 定义字符串变量arr&#xff0c;用来存储输入的字符串getline(cin, arr); // 通过getline函数输入完…

企业文件透明加密软件——「天锐绿盾」数据防泄密管理软件系统

PC访问地址&#xff1a; 首页 一、文档透明加密软件 文档透明加密功能&#xff1a;在不影响单位内部员工对电脑任何正常操作的前提下&#xff0c;文档在复制、新建、修改时被系统强制自动加密。文档只能在单位内部电脑上正常使用&#xff0c;在外部电脑上使用是乱码或无法打…

前端通信(渲染、http、缓存、异步、跨域)自用笔记

SSR/CSR&#xff1a;HTML拼接&#xff1f;网页源码&#xff1f;SEO/交互性 SSR &#xff08;server side render&#xff09;服务端渲染&#xff0c;是指由服务侧&#xff08;server side&#xff09;完成页面的DOM结构拼接&#xff0c;然后发送到浏览器&#xff0c;为其绑定状…

Qt+C++串口调试接收发送数据曲线图

程序示例精选 QtC串口调试接收发送数据曲线图 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<QtC串口调试接收发送数据曲线图>>编写代码&#xff0c;代码整洁&#xff0c;规则&…

为何lazada、亚马逊、速卖通卖家都选择自养账号测评?

无论是做亚马逊还是shopee、Lazada、速卖通、wish、煤炉、拼多多Temu、敦煌网、eBay、Etsy、Newegg、美客多、Allegro、阿里国际、poshmark、沃尔玛、joom、OZON等平台。如果想要销量好&#xff0c;免不了进行补单测评的&#xff0c;因为不管对于哪一个平台的店铺新产品而言&am…

探工业互联网的下一站!腾讯云助力智造升级

引言 数字化浪潮正深刻影响着传统工业形态。作为第四次工业革命的重要基石&#xff0c;工业互联网凭借其独特的价值快速崛起&#xff0c;引领和推动着产业变革方向。面对数字化时代给产业带来的机遇与挑战&#xff0c;如何推动工业互联网的规模化落地&#xff0c;加速数字经济…

开利网络受邀参与御盛马术庄园发展专委会主题会议

近日&#xff0c;开利网络受邀参与深度合作客户御盛马术庄园组织的首届发展专委会主体会议&#xff0c;就马术庄园发展方向进行沟通&#xff0c;数字化也是重要议题之一。目前&#xff0c;御盛马术庄园已经完成数字化系统的初步搭建&#xff0c;将通过线上线下相结合的方式搭建…

编写接口文档示例:从零开始,轻松掌握关键技巧

接口文档的编写是软件开发中至关重要的一环&#xff0c;本文将详细介绍如何编写接口文档示例&#xff0c;为您揭示从基础知识到高级技巧的全过程。通过实用的指导和比喻&#xff0c;让您轻松掌握编写接口文档示例的艺术。 在现代软件开发中&#xff0c;编写接口文档示例是确保项…

Linux 上 离线部署GeoScene Server Py3 运行时环境

默认安装ArcGIS Pro的时候&#xff0c;会自动部署上Python3环境&#xff0c;所以在windows上不需要考虑这个问题&#xff0c;但是linux默认并不部署Py3&#xff0c;因此需要单独部署&#xff0c;具体部署可以参考Linux 上 ArcGIS Server 的 Python 3 运行时—ArcGIS Server | A…

PAT(Advanced Level) Practice(with python)——1067 Sort with Swap(0, i)

Code # 输入有毒&#xff0c;需避坑 # N int(input()) L list(map(int,input().split())) N L[0] L L[1:] res 0 for i in range(1,N):while L[0]!0:# 把所有不在正常位置下的数换到正常t L[0]L[0],L[t] L[t],L[0]res1if L[i]!i:# 换完全后如果对应位置下的数不是目标…

【校招VIP】测试专业课之TCP/IP模型

考点介绍&#xff1a; 大厂测试校招面试里经常会出现TCP/IP模型的考察&#xff0c;TCP/IP协议是网络基础知识&#xff0c;但是在校招面试中很多同学在基础回答中不到位&#xff0c;或者倒在引申问题里&#xff0c;就丢分了。 『测试专业课之TCP/IP模型』相关题目及解析内容可点…

免费开源CRM:有哪些免费开源的CRM系统可供选择?

CRM系统是什么 CRM就是客户关系管理系统&#xff0c;简单来说&#xff0c;就是一个要做到集客户管理&#xff0c;产品进销存&#xff0c;订单跟进&#xff0c;数据分析&#xff0c;售后维护为一体的系统。而开源的CRM系统&#xff0c;最基本的含义是代码是公开的&#xff0c;任…

innovus添加pad的命令

我正在「拾陆楼」和朋友们讨论有趣的话题&#xff0c;你⼀起来吧&#xff1f; 拾陆楼知识星球入口 innovus中添加pad需要使用addInst命令创建physical cell&#xff0c;因为pad没有逻辑功能&#xff0c;不存在与网表中&#xff0c;需要自己创建。 添加pad用addInst -inst $pa…

pr剪辑工具绿色版本

免费提供 提取码: 402s Pr提供了采集、剪辑、调色、美化音频、字幕添加、 输出、DVD刻录等一整套流程&#xff0c; 并和其他Adobe 软件高效集成&#xff0c;使您足以完成在编辑、 制作、工作上遇到的所有挑战&#xff0c;满足您创建高质量作品的要求。 Pr的版本选择 常用…

通过浏览器控制台使用js脚本进行浏览器操作(定时点击等)

进行此操作前我们首先需要了解js编程语言 --了解之后我们就可以去操作了 这里我们拿csdn评论举例子&#xff1b; 点开评论界面右键审查元素 此时我们需要找到输入框dom和评论按钮dom 点击元素之后点击箭头然后去界面上选中文本框核按钮 然后我们就可以知道这个文本框的id 同…

没人用还占空间 微软Win11系统将允许卸载更多内置软件

不出意外的话&#xff0c;下个月Win11系统就要迎来Win11 23H2升级了&#xff0c;这是第二个年度更新&#xff0c;带来永不合并任务栏、ZIP解压缩原生支持等新功能。 在推新的同时&#xff0c;微软还要除旧&#xff0c;Win11系统内置了很多应用&#xff0c;一些是集成到系统功能…

ARM汇编【2】:LOAD 和 STORE

ARM使用load-store指令进行内存访问&#xff0c;这意味着只有LDR和STR指令才能访问内存&#xff0c;虽然在X86上&#xff0c;大多数指令都可以对内存中的数据进行操作&#xff0c;但在ARM上&#xff0c;数据在进行操作之前必须从内存移动到寄存器中。这意味着&#xff0c;在ARM…

简单理解Socket

TCP/IP 要想理解socket首先得熟悉一下TCP/IP协议族&#xff0c; TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff09;即传输控制协议/网间协议&#xff0c;定义了主机如何连入因特网及数据如何再它们之间传输的标准&#xff0c; 从字面意思来看T…

ESD实时监测报警系统主要包括哪些部分

ESD实时监测报警系统是指用于监测静电放电&#xff08;Electrostatic Discharge, ESD&#xff09;并及时报警的系统。静电放电是指物体由于静电积累引起的瞬时放电现象&#xff0c;可能对电子元器件、电子设备等造成潜在的损坏或干扰。 ESD实时监测报警系统通常包括以下几个主…

岩棉革新——洛科威推出NGF新一代岩棉产品

作为全球领先的岩棉制品生产商&#xff0c;洛科威公司基于在岩棉性能革新领域八十多年的深入研究和生产工艺的不断优化&#xff0c;在中国市场正式推出NGF新一代岩棉制品&#xff0c;并在上海国际绿色建筑建材博览会和2023国际绿色低碳技术展上正式发布。 洛科威NGF产品作为革…