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…