Vue+elementUI实现下拉框多选和反选

Vue代码如下:

<el-form-item label="下拉框名称:"><el-select size="mini" v-model="testModelName" @focus="getSelectInfo" :disabled="SelectStyle"
filterable clearable placeholder="" multiple collapse-tags>
<el-button type="text" v-on:click="selectAll(1)"><i class="el-icon-circle-check" />全选</el-button><el-button type="text" v-on:click="removeTag(1)"><i class="el-icon-close" />清空</el-button><el-button type="text" v-on:click="selectReverse(1)"><i class="el-icon-copy-document" />反选</el-button>
<el-option v-for="code in currentOptions" :key="code.value" :label="code.label":value="code.value">
</el-option></el-select>
</el-form-item>

其中,multiple:是否多选
collapse-tags:多选时是否将选中值按文字的形式展示
script代码如下:

//清空操作removeTag(type) {this.testModelName = [];},//全选操作selectAll(type) {this.currentOptions.map(item => {if(!this.testModelName.includes(item.value)){this.testModelName.push(item.value)}})},//反选操作selectReverse(type) {let val = [];this.currentOptions.map(item => {let index = this.testModelName.indexOf(item.value);//判断现有选中数据是否包含如果不包含则进行反选数据if (index != -1) {} else {val.push(item.value)}})this.testModelName = val},

最终呈现的效果:
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于 FPGA 的 HDMI/DVI 显示

文章目录 前言一、HDMI 与 DVI 的区别与联系1.1 DVI 接口含义1.2 HDMI 接口含义1.3 HDMI 与 DVI 的区别1.4 HDMI 与 DVI 的兼容性1.5 HDMI 与 DVI 接口对比 二、DVI 数据链路介绍2.1 输入接口层2.2 TMDS 发送器2.3 TMDS 接收器2.4 输出接口层 三、传输原理与实现3.1 TMDS原理3.…

express框架使用express-generator工具

1.全局安装 npm install -g express-generator 2.检测是否安装成功 express -h 3. 快速创建Express应用程序的工具 express -e express-generator 说明&#xff1a;express-e和express-generator都是用于快速创建Express应用程序的工具。express-e是一个命令行工具&#xff0…

基于Javaweb实现ATM机系统开发实战(九)存款功能实现

先看前端界面确定后端需要处理的参数&#xff0c;把一些参数进行修改&#xff1a; <% page language"java" contentType"text/html; charsetUTF-8" pageEncoding"UTF-8"%> <% taglib prefix"c" uri"http://java.sun.com…

ubuntu使用WHEELTE N100并用rviz显示

写在最开头&#xff0c;如果wheeltec n100被自己改动过参数导致无法读取数据&#xff0c;建议在window的上位机中恢复出厂设置并重新上电&#xff0c;在转入ubuntu。因为我就是这个问题&#xff0c;客服远程操控才帮我解决的。 所有官方资料共享&#xff0c;侵删&#xff1a; …

bug:file name too long文件名超出系统最大限制

各操作系统支持最长的文件和目录名称长度&#xff08;Linux、Win、Mac&#xff09; 今天开发需求的时候发现无法新建文件&#xff0c;提示file name too lang&#xff0c;于是翻阅和查询了一些资料&#xff0c;发现不同操作系统下文件名和目录名最长的长度不同。 操作系统文件名…

Live800在线客服系统:工单系统如何提升企业服务效率?

随着企业规模的扩大和客户需求的增加&#xff0c;如何有效地管理客户服务日益成为企业发展过程中重要的一环。作为客户服务的重要支撑系统之一&#xff0c;工单系统被越来越多的企业所采用。那么工单系统究竟是如何帮助企业提升服务效率的呢&#xff1f;本文将从工单的分配、追…

LeetCode[470]用Rand7()实现Rand10()

难度&#xff1a;Medium 题目&#xff1a; 给定方法 rand7 可生成 [1,7] 范围内的均匀随机整数&#xff0c;试写一个方法 rand10 生成 [1,10] 范围内的均匀随机整数。 你只能调用 rand7() 且不能调用其他方法。请不要使用系统的 Math.random() 方法。 每个测试用例将有一个内部…

Android Java代码与JNI交互 JNI访问Java构造方法(九)

🔥 Android Studio 版本 🔥 🔥 创建包含JNI相关函数类 JNIConstructorClass.java 🔥 package com.cmake.ndk1.jni;import com.cmake.ndk1.model.Animal;public class JNIConstructorClass {static {System.loadLibrary("constructor-class-lib");}public …

Django_获取api接口的传参

目录 当参数为form-data 或者x-www-form-urlencoded类型时&#xff0c;使用request.POST获取到参数 当参数为raw类型时&#xff0c;使用request.body获取到参数&#xff0c;获取的参数需要经过处理才能使用 源码等资料获取方法 当参数为form-data 或者x-www-form-urlencoded…

连接区块链节点的 JavaScript 库 web3.js

文章目录 前言web3.js 介绍web3.js安装web3.js库模块介绍连接区块链节点向区块链网络发送数据查询区块链网络数据 前言 通过前面的文章我们可以知道基于区块链开发一个DApp&#xff0c;而DApp结合了智能合约和用户界面&#xff08;客户端&#xff09;&#xff0c;那客户端是如…

ubuntu20离线安装nodejs、GO、go.rice及yarn

虽然是离线安装&#xff0c;但该有的安装包还是需要的… 目录 1、安装nodejs1.1查看本地是否存在nodejs1.2创建nodejs文件夹1.3下载nodejs二进制文件1.4解压并改名1.5添加软连接 2安装GO2.1创建go文件夹2.2下载go二进制文件2.3解压文件2.4添加环境变量2.5设置sudo可执行go命令…

stm32(SPI读写W25Q18)

SPI 是什么&#xff1f; SPI是串行外设接口&#xff08;Serial Peripheral Interface&#xff09;的缩写&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总 线&#xff0c;并且在芯片的管脚上只占用四根线&#xff0c;节约了芯片的管脚&#xff0c;同时为PC…

移动互联网应用程序(app)个人信息安全测试能力验证-流程介绍

ILONGYU 产品简介 为规范检验检测市场&#xff0c;提升检验检测机构技术能力&#xff0c;根据《检验检测机构资质认定管理办法》《实验室能力验证实施办法》等有关规定&#xff0c;市场监管总局决定在社会重点关注的部分检验检测领域&#xff0c;组织开展2020年国家级检验检测…

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面

Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面 虽然说IE6除了部分要求苛刻的需求以外已经被可以不考虑了&#xff0c;但是WIN7自带的浏览器IE8还是需要支持的。 本文这个方法主要的优点&#xff0c;个人觉得就是准备少&#xff0c;不需要上网寻找大量的图片做素材&…

MySQL的MVCC

目录 1.MVCC基本概念 1.当前读&#xff1a; 2.快照读&#xff1a; 3.MVCC&#xff1a;Multi-Version Concurrency Control&#xff0c;多版本并发控制&#xff1a; 2.MVCC实现原理-三个隐藏字段 3.MVCC实现原理-undo log日志 1.undo log&#xff1a;回滚日志 2.undo log…

samba服务

samba服务 1. samba诞生背景2. samba简介3. samba配置文件详解3.1 配置文件中参数的作用3.1.1 security参数的四种验证方式3.1.2 passdb backend定义用户后台的类型 4. samba服务部署与配置windos共享linux挂载共享 1. samba诞生背景 1987 年&#xff0c;微软公司和英特尔公司…

vue中elementUI表单循环验证

进行验证的步骤 1、表单el-form 添加 :model"form" ref"form" :rules"rules"&#xff0c;注意是 :model"form"不是v-model&#xff0c;而后每个el-form-item绑定prop 2、不循环的示例在官网可看 3、循环表单的验证&#xff1a;3-1、e…

顺序表 --- C语言实现

目录 1.线性表 2.顺序表 2.1 概念和结构 2.2 接口实现 2.3 数组相关面试题 2.4 顺序表的问题及思考 1.线性表 什么是线性表 &#xff1a; 线性表&#xff08;linear list)是n个具有相同特性的数据元素的有限序列。线性表是一种在实际中广泛使用的数据结构&#xff0c;常…

阿里云服务器架构X86_GPU_裸金属_超级计算集群详解

阿里云服务器架构有什么区别&#xff1f;X86计算、ARM计算、GPU/FPGA/ASIC、弹性裸金属服务器、超级计算集群有什么区别&#xff1f;阿里云服务器网分享云服务器ECS架构详细说明&#xff1a; 目录 阿里云服务器ECS架构说明 X86计算 ARM计算 GPU/FPGA/ASIC 弹性裸金属服务…

A_003.adb常用命令使用介绍

1.adb工作原理说明 adb命令是调试控制手机过程中用的比较多工具。adb是一个C/S架构的应用程序,主要由三部分组成: (1)、运行在电脑端的adb client程序 在电脑终端中执行adb --help可以查看当前支持的adb命令。当在命令行执行程序adb相关命令的时候,adb程序尝试连接到主机上…