(css)el-tag标签,el-select多选框,el-cascader级联选框自定义样式

(css)el-tag标签,el-select多选框,el-cascader级联选框自定义样式


css:

:root {
	--button-color: #065de0;
}

// 标签
.tagNew {
    margin-right: 20px;
    border-radius: 20px;
}

.el-tag.el-tag--info {
    background-color: var(--button-color);
    border-color: var(--button-color);
    border-radius: 20px;
    color: #fff;
    .el-tag__close {
        color: #fff;
    }
}

// 多选框
.el-select .el-tag__close.el-icon-close {
    background-color: var(--button-color);
} 

// 级联
.el-cascader__tags .el-tag .el-icon-close {
    background-color: var(--button-color);
}

1.标签:

在这里插入图片描述

<el-tag
  v-for="(item,index) in formInline.batchNumber"
  :key="index"
  :label="item"
  :name="item"
  closable
  class="tagNew"
  effect="dark" //
  color="#065de0" //
  size="mini"
  @close="handleClose(item)"
>{{ item }}</el-tag>

2.多选框

在这里插入图片描述

<el-form-item label="选择:">
  <el-select
    v-model="formInline.inputItems"
    placeholder="选择字段"
    multiple
    collapse-tags
    filterable
    style="width: 430px;"
  >
    <el-option
      v-for="(item,index) in ziduanOptions"
      :key="index"
      :label="item.projectName"
      :value="item.projectName"
    />
  </el-select>
</el-form-item>

3.级联选框

在这里插入图片描述

<el-form-item label="选择:">
  <el-cascader
    v-model="formInline.algorithmId"
    :options="modelOptions"
    :props="{ value: 'id', label: 'name', multiple: true, emitPath: false,}" //
    collapse-tags //
    filterable
    placeholder="请选择"
    size="mini"
    style="width: 430px;"
    @change="modelChange"
  >
    <template slot-scope="{ node, data }">
      <span>{{ data.name }}</span>
      <span v-if="!node.isLeaf">({{ data.children.length }})</span>
    </template>
  </el-cascader>
</el-form-item>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【THM】Metasploit: Exploitation(利用)-初级渗透测试

介绍 在这个房间里,我们将学习如何使用Metasploit进行漏洞扫描和利用。我们还将介绍数据库功能如何使管理更广泛范围的渗透测试活动变得更容易。最后,我们将研究使用msfvenom生成有效负载以及如何在大多数目标平台上启动Meterpreter会话。 更具体地说,我们将讨论的主题是:…

如何实现OpenHarmony的OTA升级?

OTA简介 随着设备系统日新月异&#xff0c;用户如何及时获取系统的更新&#xff0c;体验新版本带来的新的体验&#xff0c;以及提升系统的稳定性和安全性成为了每个厂商都面临的严峻问题。OTA&#xff08;Over the Air&#xff09;提供对设备远程升级的能力。升级子系统对用户…

字母大小写转换(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;char c1 A;char c2 0;//实现大小写转换&#xff1b;c2 c1 32;//输出结果&#xff1b;printf("c2的编码是&…

Springboot实现OCR(文字识别),最新教程!linux版

前言 不用引入什么dll&#xff0c;以及各种乱七八糟的东西。不废话&#xff0c;直接开始教程&#xff01;没有过多讲解里面的知识点&#xff0c;如有需要详细了解请加Qq:1101165230 1、Linux下安装与使用 1.1 安装tesseract&#xff08;复制粘贴敲回车&#xff0c;中间输入Y&…

SOLIDWORKS图像品质设置对文件大小和系统性能的影响

SOLIDWORKS图像品质设置对文件大小和系统性能的影响非常大。不同的模型外形对整体性能是否也会有影响呢&#xff1f;因此我们会使用4种基本形状&#xff1a;立方体、圆柱体、球体和圆环来进行一系列的测试。 这个测试内容&#xff0c;就是通过调整“图像品质”选项设置中的不同…

iOS:如何安全且优雅地操控数组元素

前言 在 iOS 开发的世界里&#xff0c;数组(Array)的操作频率高得令人咋舌。数组贯穿于我们每一个功能的实现和每一行代码的编写之中&#xff0c;一手托起了数据结构的半边天。但这位工具之王&#xff0c;有时候也会变身为导致程序崩溃的罪魁祸首。当访问越界&#xff0c;当插…

Mysql主键优化之页分裂与页合并

主键设计原则 满足业务需求的情况下&#xff0c;尽量降低主键的长度。因为如果主键太长&#xff0c;在多个二级索引中&#xff0c;主键索引值所占用的空间就会过大。 插入数据时&#xff0c;尽量选择顺序插入&#xff0c;选择使用AUTO_INCREMENT自增主键。因为乱序插入会导致页…

STM32 F401/411外设内部互联矩阵摘要

STM32 F401/411外设内部互联矩阵摘要 &#x1f4cd;参考文档AN4646&#xff1a;https://www.stmcu.com.cn/Designresource/detail/localization_document/709908(中译) -&#x1f4cc; 相关工程案例《HAL STM32主从定时器联级使用》、《STM32G4 TIM1触发ADC转换》 &#x1f4d…

Qt+VS2019中使用QAxObject时的环境配置

在纯Qt中 在.pro中添加axcontainer模块即可 而VSqt中&#xff1a; 特别傻的是&#xff1a;我运行的是release&#xff0c;但配置的是debug的属性页&#xff0c;一直报错&#xff0c;人都傻了。 最后发现果然是人傻。

金蝶BI方案的报表,主打做得快、易理解

金蝶做数据分析报表慢、步骤多、数据不够直观&#xff1f;但奥威-金蝶BI方案的报表就不一样了&#xff0c;不仅做得快&#xff0c;还十分好理解&#xff0c;因为它做出来的是随时可以按需自助的BI智能数据可视化分析报表。 有多快&#xff1f; 注册奥威BI SaaS平台&#xff0…

python数据可视化(总结版)

1 基本图形 1.1 折线图 x np.arange(4,19) y_max np.array([32,33,34,34,33,31,30,29,30,29,26,23,21,25,31]) y_min np.array([19,19,20,22,22,21,22,16,18,18,17,14,15,16,16]) plt.title("20200806903013") plt.plot(x,y_max) plt.plot(x,y_min) plt.show()1…

14届蓝桥杯省赛 C/C++ B组 T4 飞机降落 (DFS)

记录此题提醒自己&#xff0c;此类时间轴问题可以通过DFS解决 DFS不是能解决所有题吗 对于此题&#xff0c;我们将降落的飞机的个数和时间轴作为DFS的形参&#xff0c;这样可以节省手动回溯的过程。 并且在DFS的过程中我们要加入一些贪心策略&#xff0c;否则直接爆搜有可能搜…

linux通配符

通配符&#xff0c;它是一种用于匹配文件名的特殊字符。通配符在Linux中可以帮助我们更加方便和快捷地查找和操作文件。

解决VM报错:不支持虚拟化的 amd-v/rvi

安装了VMware之后&#xff0c;想测试一下虚拟机嵌套。在勾选虚拟机CPU的虚拟化AMD-V/RVI之后&#xff0c;竟然无法启动&#xff0c;提示“此平台不支持虚拟化的 amd-v/rvi”。 上网找了一下资料&#xff0c;发现是因为Hyper-V与VMware冲突以及Windows Defender的内核隔离导致的…

rsync+inotify组合实现及时远程同步

目录 Rsync&#xff08;Remote Sync&#xff09;简介&#xff1a; Rsync 主要特点&#xff1a; Rsync 常用命令选项&#xff1a; Inotify 简介&#xff1a; Inotify 的主要功能&#xff1a; 结合 Rsync 和 Inotify 实现实时同步&#xff1a; 操作步骤&#xff1a; 配置…

算法刷题Day24 | 回溯算法基础理论、 77. 组合

目录 0 引言1 回溯算法基础理论1.1 回溯算法模板1.2 2 组合2.1 我的解题2.2 剪枝操作 &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题&#xff1a;算法刷题Day23 | 回溯算法基础理论、 77. 组合❣️ 寄语&#xff1a;书…

HarmonyOS实战开发-使用OpenGL实现2D图形绘制和动画。

介绍 基于XComponent组件调用Native API来创建EGL/GLES环境&#xff0c;从而使用标准OpenGL ES进行图形渲染。本项目实现了两个示例&#xff1a; 使用OpenGL实现2D的图形绘制和动画&#xff1b;使用OpenGL实现了在主页面绘制两个立方体&#xff0c;光源可以在当前场景中移动&…

智能电网将科技拓展至工厂之外的领域

【摘要/前言】 物联网已然颠覆我们日常生活的许多层面。在家居方面&#xff0c;家电变成连网设备&#xff0c;不仅让我们能控制灯光与上网购物&#xff0c;甚至在出门时提供安全功能。在工业领域&#xff0c;智能工厂改变产品制造的方式。工业物联网(IIoT)不仅让制造商更加敏捷…

启明智显M4核心板驱动17寸屏 为您打造无与伦比的视觉盛宴

近日&#xff0c;启明智显推出M4核心板驱动17寸屏&#xff0c;8 Link LVDS接口下1280*1024分辨率为用户展现了超强的视觉体验。 M4核心板采用纯国产架构&#xff0c;内置了16位DDR内存&#xff0c;为设备提供强大的数据处理能力和高效的运行速度。无论是处理复杂的任务还是进…

关于create table as

create table as这个语句的不熟悉&#xff0c;这个语句建表导致的表主键、索引、auto_increment的丢失。 该语句对"列结构"是可以正常复制的&#xff0c;只有索引、主键等信息会丢失&#xff0c;原以为"AUTO_INCREMENT"是属于id这一列的列信息&#xff0c;…