Vue 多选下拉框+下拉框列表中增加标签

news2024/11/27 7:29:11

1、效果图

2、代码部分

(1)代码

<el-select class="common-dialog-multiple multipleSelectStyle" @change="clusterListChange" v-model="form.clusterId" placeholder="请先选择" multiple filterable default-first-option :popper-append-to-body="false">
  <el-option v-for="item in clusterList" :key="item.id" :label="item.name" :value="item.id">
    <el-checkbox @change="clickTenantBox(item.id)" :value="form.clusterId.includes(item.id)" :label="item.name">
      <span class="checkbox-label">{{ item.name }}</span>
      <span class="checkbox-tag" v-if="item.alias">
        <el-tag :type="item.alias=='远程'?'success':''">{{ item.alias }}</el-tag>
      </span>
    </el-checkbox>
  </el-option>
</el-select>

(2)数据定义

clusterList: [
  {
    id:1,
    name: '集群1',
    alias: '远程',
  },
  {
    id:2,
    name: '集群2',
    alias: '别名',
  },
  {
    id:3,
    name: '集群3',
  },
  {
    id:4,
    name: '集群4',
    alias: '远程',
  },
  {
    id:5,
    name: '集群5',
    alias: '别名',
  },
  {
    id:6,
    name: '集群6',
  },
  {
    id:7,
    name: '集群7',
    alias: '远程',
  },
  {
    id:8,
    name: '集群8',
    alias: '别名',
  },
  {
    id:9,
    name: '集群9',
  },
],

(3)方法

clickTenantBox(val) {
  let values = this.form.clusterId;
  if (values.includes(val)) {
    this.form.clusterId = values.filter(n => n !== val);
  } else {
    values.push(val);
    this.form.clusterId = values;
  }
},
clusterListChange(){
  console.log(this.form.clusterId)
},

(4)样式

.multipleSelectStyle {
  .el-select__tags {
    flex-wrap: unset;
    overflow: auto;
    margin-left: 2px;
  }
}

.multipleSelectStyle ::-webkit-scrollbar {
  display: none;
}

.common-dialog-multiple{
  .el-tag--small{
    height: 18px;
  }

  .el-select-dropdown__list{
    padding: 5px 13px 5px 8px;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item{
    padding-left: 12px;
    padding-right: 0;
    border-radius: 2px;
    height: 32px;
    line-height: 32px;
    margin-bottom: 4px;

    .el-checkbox{
      width: 100%;

      .el-checkbox__input.is-checked+.el-checkbox__label{
        color: #19BBFF !important;
        font-weight: 600;
      }

      .el-checkbox__input{
        margin-top: -10px;

        .el-checkbox__inner{
          border: 1px solid #B0C0C5;
        }
      }

      .el-checkbox__label {
        width: calc(100% - 15px);
        height: 32px;

        .checkbox-label{
          display: inline-block;
          //width: calc(100% - 40px);
          max-width:calc(100% - 60px);
          overflow: hidden;
          text-overflow: ellipsis;
          padding-top: 7px;
        }

        .checkbox-tag{
          float: right;
          margin-right: 10px;
          padding-top: 6px;

          .el-tag {
            border-radius: 4px;
            background: #F8B02D14;
            border: 1px solid #F8B02D99;
            color: #FFA901;
            height: 18px;
            padding: 0 7px;
            line-height: 18px;
            font-size: 12px;
          }

          .el-tag.el-tag--success {
            background: #22CE7614;
            border: 1px solid #22CE7699;
            color: #2DC86D;
          }
        }
      }
    }
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item:last-child{
    margin-bottom: 4px;
  }

  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #ecf8fb;
    color: #19bbff;
    .el-checkbox{
      .el-checkbox__input .el-checkbox__inner{
        border-color: #19BBFF !important;
      }
      .el-checkbox__label{
        color: #19BBFF !important;
      }
    }
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    color: #18bbff;
    background: #fff;

    .el-checkbox{
      .el-checkbox__input .el-checkbox__inner{
        border-color: #19BBFF !important;
      }
      .el-checkbox__label{
        color: #19BBFF !important;
        font-weight: 600;
      }
    }
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{
    content: none;
  }
}

.el-checkbox__inner::after{
  transition: transform .0s ease-in .0s,-webkit-transform .0s ease-in .0s !important;
}

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

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

相关文章

【BUG】已解决:AttributeError: ‘str‘ object has no attribute ‘read‘

AttributeError: ‘str‘ object has no attribute ‘read‘ 目录 AttributeError: ‘str‘ object has no attribute ‘read‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998https://bbs.csdn.net/topics/617804998 欢迎来到我的主…

(7) cmake 编译C++程序(二)

文章目录 概要整体代码结构整体代码小结 概要 在ubuntu下&#xff0c;通过cmake编译一个稍微复杂的管理程序 整体代码结构 整体代码 boss.cpp #include "boss.h"Boss::Boss(int id, string name, int dId) {this->Id id;this->Name name;this->DeptId …

error C2011: “sockaddr_in”:“struct”类型重定义的修改办法

问题 windows.h和winsock2.h存在有类型重定义,往往体现在头文件包含winsock2.h和windows.h时出现编译错误: error C2011: “sockaddr_in”:“struct”类型重定义 2>D:\Windows Kits\10\Include\10.0.22000.0\shared\ws2def.h(442,5): error C2143: 语法错误: 缺少“}”(…

为什么大家都想学大模型?一文揭秘!

小编只是普通的汽车软件工程师&#xff0c;想了解人工智能&#xff0c;又感觉好遥远&#xff0c;仔细的看了半天&#xff0c;就一个想法 好好拥抱AI吧。真的好强。 相比之下&#xff0c;Autosar 是个 der 啊。。。。 人工智能基础概念全景图 AI -> 机器学习 机器学习 ->…

探索 Python 的新视界:ttkbootstrap 库

探索 Python 的新视界&#xff1a;ttkbootstrap 库 背景与简介 在 Python 的世界中&#xff0c;库的丰富性是其强大功能的重要体现之一。今天&#xff0c;我们将一起探索一个令人兴奋的库——ttkbootstrap。这个库不仅提供了丰富的界面组件&#xff0c;还使得界面设计变得简单…

Python脚本批量下载ECWMF免费数据教程

前情提要 最近需要使用EC的一些数据&#xff0c;摸索下载过程中顺便记录下来&#xff0c;综合了EC上免费数据集的两个数据集的下载方式&#xff0c;使用python脚本下载 相比在网站上操作下载&#xff0c;个人更推荐脚本下载&#xff0c;官方已经封装好了两个库直接可以方便使…

HTML5实现好看的天气预报网站源码

文章目录 1.设计来源1.1 获取天气接口1.2 PC端页面设计1.3 手机端页面设计 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_4…

Django+vue自动化测试平台(27)-- 封装websocket测试

websocket概述&#xff1a; WebSocket 是一种在单个 TCP 连接上进行全双工通信(Full Duplex 是通讯传输的一个术语。通信允许数 据在两个方向上同时传输&#xff0c;它在能力上相当于两个单工通信方式的结合。全双工指可以同时&#xff08;瞬时&#xff09;进 行信号的双向传输…

Linux第四节课(指令与权限)

1、date指令(时间) 程序运行到自己的每一个关键时刻&#xff0c;都要自己打日志&#xff01; 日志包括时间、日志等级、日志具体信息、其他信息等&#xff0c;然后按照行为单位写入文件中&#xff0c;这个文件被称为日志文件&#xff01; 在日志文件中筛选信息时&#xff0c…

idea springBoot启动时覆盖apollo配置中心的参数

vm options -Dorder.stat.corn“0/1 * * * * ?” 只有vm options, -D参数才能覆盖apollo参数 program arguments –key01val01 --key02val02 environment varibales envFAT;key02val02;key03val03

视觉巡线小车——STM32+OpenMV(四)

目录 前言 一、整体控制思路 二、代码实现 1.主函数 2.定时器回调函数 总结 前言 通过以上三篇文章已将基本条件实现&#xff0c;本文将结合以上内容&#xff0c;进行综合控制&#xff0c;实现小车的视觉巡线功能。 系列文章请查看&#xff1a;视觉巡线小车——STM32OpenMV系列…

BUUCTF [WUSTCTF2020]朴实无华

首先进来不知道要干啥&#xff0c;上dirsearch扫出个机器人协议&#xff0c;一看有点东西 直接访问很明显这不是flag 主页面看他说什么不能修改头部&#xff0c;看一下数据包 发现了好东西 看到源码&#xff0c;又得绕过了。不过这编码有点问题导致乱码了 找个在线网站稍微恢复…

QtQuick-第一个程序

新建Qt Quick Application。 main.cpp(保持原有的即可): #include <QGuiApplication> #include <QQmlApplicationEngine>int main (int argc, char *argv[]) {QGuiApplication app (argc, argv);QQmlApplicationEngine engine;const QUrl url (QStringLiteral (&…

南平建网站公司推荐 好用的b2b独立站模板

床品毛巾wordpress独立站模板 床单、被套、毛巾、抱枕、靠垫、围巾、布艺、枕头、乳胶枕、四件套、浴巾wordpress网站模板。 https://www.jianzhanpress.com/?p4065 打印耗材wordpress自建独立站模板 色带、墨盒、碳粉、打印纸、硒鼓、墨盒、墨水、3D打印机、喷头wordpress…

基于 Apache 的 httpd 文件服务器

基于 Apache 的 httpd 文件服务器 文件服务器的简介 httpd&#xff08;HTTP Daemon&#xff0c;超文本传输协议守护进程的简称&#xff09;&#xff0c;运行于网页服务器后台&#xff0c;等待传入服务器请求的软件。 httpd 能够自动回应服务器的请求&#xff0c;并使用 http…

<PLC><Python>使用python与汇川PLC基于socket通讯程序:传感器数据传送与监控

前言 本系列是关于PLC相关的博文,包括PLC编程、PLC与上位机通讯、PLC与下位驱动、仪器仪表等通讯、PLC指令解析等相关内容。 PLC品牌包括但不限于西门子、三菱等国外品牌,汇川、信捷等国内品牌。 除了PLC为主要内容外,PLC相关元器件如触摸屏(HMI)、交换机等工控产品,如…

一文读懂英伟达A800的性能及应用场景

随着人工智能&#xff08;AI&#xff09;和高性能计算&#xff08;HPC&#xff09;领域的快速发展&#xff0c;对处理器的性能要求日益提高。英伟达&#xff08;NVIDIA&#xff09;作为全球领先的图形处理器&#xff08;GPU&#xff09;和人工智能技术公司&#xff0c;不断推出…

【C++】C++类和对象详解(上)

目录 思维导图大纲&#xff1a; 思维方面&#xff1a; 1. 类的定义&#xff1a; 2. 类的特点&#xff1a; 3. this指针&#xff1a; 4. 类的默认成员函数 默认构造函数 1.构造函数 2.析构函数 3.拷贝构造函数 4. 赋值运算符重载 1. 运算符重载 5. 日期类实现&#…

abc363+cf960div.2+牛客周赛49轮

C - Avoid K Palindrome 2 (atcoder.jp) 思路&#xff1a; 罗列出排列的每一种情况&#xff0c;再根据题目要求进行判断 代码&#xff1a; void solve() {ll n, k;cin >> n >> k;string s;vector<char>a;cin >> s;for (int i 0; i < n; i)a.pus…

在Windows安装、部署Tomcat的方法

本文介绍在Windows操作系统中&#xff0c;下载、配置Tomcat的方法。 Tomcat是一个开源的Servlet容器&#xff0c;由Apache软件基金会的Jakarta项目开发和维护&#xff1b;其提供了执行Servlet和Java Server Pages&#xff08;JSP&#xff09;所需的所有功能。其中&#xff0c;S…