element中el-cascader级联选择器只有最后一级可以多选

文章目录

  • 一、前言
  • 二、实现
    • 2.1、设置`popper-class`和`multiple`
    • 2.2、设置样式
  • 三、最后

一、前言

element-uiel-cascader级联选择器只有最后一级可以多选,其它级只有展开子节点的功能,如下图所示:

可以观察到最后一级的li节点上没有属性aria-haspopup="true",可以通过这个来隐藏非最后一级节点的el-checkbox来解决此问题

二、实现

2.1、设置popper-classmultiple

设置属性popper-class自定义浮层类名为popper-select,把props属性中的multiple设置为true,开启多选

<el-cascader
             :options="options"
             popper-class="popper-select"
             :props="{
                     multiple: true
             }"
/>

2.2、设置样式

选中li属性aria-haspopuptrue的标签,隐藏此标签下的el-checkbox选择框。

注意:style标签中不要加 scope

.popper-select {
        li[aria-haspopup="true"] {
                .el-checkbox {
                        display: none;
                }
        }
}

三、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

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

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

相关文章

Python爬虫—requests模块简单应用

Python爬虫—requests模块简介 requests的作用与安装 作用&#xff1a;发送网络请求&#xff0c;返回响应数据 安装&#xff1a;pip install requests requests模块发送简单的get请求、获取响应 需求&#xff1a;通过requests向百度首页发送请求&#xff0c;获取百度首页的…

MATLAB R2023b for Mac 中文

MATLAB R2023b 是 MathWorks 发布的最新版本的 MATLAB&#xff0c;适用于进行算法开发、数据可视化、数据分析以及数值计算等任务的工程师和科学家。它包含了一系列新增功能和改进&#xff0c;如改进了数据导入工具&#xff0c;增加了对数据帧和表格对象的支持&#xff0c;增强…

pr怎么剪掉不要的部分?

在我们的日常工作中&#xff0c;剪视频的时候常常会需要把某个视频中我们不想要的地方剪掉&#xff0c;有的时候是一段&#xff0c;也有可能是好几段。但具体应该怎么样把不要的视频剪掉呢&#xff1f;其实&#xff0c;用pr软件就可以啦&#xff01;那么&#xff0c;pr怎么剪掉…

微信小程序开发WebSocket通讯

官方文档说明&#xff1a;入口 WebSocket连接的链接只支持wss加密方式&#xff0c;且只能用域名的方式 该域名还要在微信公众平台的小程序中登记才能使用&#xff0c;开发->开发管理->服务器域名->修改 该域名要和https使用的一致 以域名地址&#xff1a;dtu.aab…

2024年第02周农产品价格报告

一、摘要 农产品价格监测主要涉及对畜禽类产品、水产品、蔬菜类产品、水果类产品的价格&#xff0c;以周为单位&#xff0c;进行变化情况的数据监测。其中&#xff0c;蔬菜类产品共18种&#xff0c;分别为大白菜、西红柿、黄瓜、青椒、芹菜、土豆、白萝卜、茄子、豆角、胡萝卜…

华媒舍:高效率的新闻资讯新闻媒体宣发套餐内容推广计划方案

怎样让自己的新闻资讯可以被大众孰知&#xff0c;变成了每一个新闻媒体宣发者一同存在的困难。下面我们就给大家介绍一套高效率的新闻资讯新闻媒体宣发套餐内容推广计划方案&#xff0c;致力于帮助新闻媒体宣发者提升宣发高效率&#xff0c;提高新闻资讯的传播性。 1.新闻媒体宣…

如何通过内网穿透实现公网访问Portainer管理监控Docker容器

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风…

GoZero微服务个人探究之路(二)Go-Zero官方api demo示例探究

官方文档api-demo教程部分网址如下&#xff1a; api demo 代码生成 | go-zero Documentation 官方demo的架构如下&#xff1a; 编辑 etc包下&#xff1a; demo-api.yaml 编辑服务名称&#xff1a;demo-apiHOST地址&#xff1a;0.0.0.0监听所有可用网络接口Port地址&#…

XSKY助力首个云原生、分布式、全栈国产化银行核心系统投产上线

近日&#xff0c;。该项目是业内首个实际投产的云原生、分布式、全栈国产化的银行核心业务系统&#xff0c;是金融科技领域突破关键核心技术应用的重大实践。 在杭州银行的新一代核心系统中&#xff0c;XSKY星辰天合具备天合翔宇“一池多芯”技术的对象存储支持了核心业务模块…

每日一题 82. 删除排序链表中的重复元素 II(中等,链表)

和昨天差不多&#xff0c;今天的是把所有重复数字的节点都删除&#xff08;昨天留了一个&#xff09; 显然当我们发现重复数字时&#xff0c;需要重复的第一个数字的前一个节点才能把重复数字删完&#xff0c;所有在while循环中我们每次判断 t.next 和 t.next.next 的值是否重复…

AI模型理解误区:微调垂直行业-VS-企业专属知识库或AI助理

概述 企业定制私有化大模型的区别&#xff0c;分为训练大模型和调用大模型两种方向&#xff0c;以及企业自己的智能客服的实现方法。 - 企业定制的私有化大模型与一般的大模型不同&#xff0c;需要高成本训练。- 企业可以选择调用已经训练好的大模型来应用。- 企业可以使用向量…

Zabbix监控(1)

目录 一.什么是zabbix Zabbix 组件&#xff1a; 主动模式&#xff1a; 被动模式&#xff1a; Zabbix 工作原理&#xff1a; zabbix 监控原理&#xff1a; 二.Zabbix 6.0 部署 先安装nginx&#xff0c;php&#xff08;yum源安装&#xff09;&#xff1a; 安装nginx&…

【面试突击】Java内存模型实战

&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308;&#x1f308; 欢迎关注公众号&#xff08;通过文章导读关注&#xff1a;【11来了】&#xff09;&#xff0c;及时收到 AI 前沿项目工具及新技术 的推送 发送 资料 可领取 深入理…

python的包argparse介绍

argparse是一个用来解析命令行参数的 Python 库&#xff0c;它是 Python 标准库的一部分。 1、未使用argparse: import math# 计算圆柱体的体积 def cal_vol(radius,height):vol math.pi * pow(radius,2) * heightreturn vol if __name____main__:print(cal_vol(2,4))2、使用…

Model:字符串列表模型QStringListModel

一、QStringListModel &#xff08;1&#xff09;功能&#xff1a;处理字符串列表的数据模型&#xff0c;可作为QListView的数据模型&#xff0c;在界面上显示和编辑字符串列表。 二、QStringListModel 类中的函数 1)、 QStringListModel(QObject *parent Q_NULLPTR) //构造函…

FairyGUI Day 1 导入FairyGUI

FairyGUI Unity3d引擎版本&#xff1a;Uinty3d 20233.2.3f1 1、从资产商店中将FairyGUI购入我的资产中&#xff0c;目前是免费的。 2、从我的资产中将FairyGUI导入到当前项目中。 3、我遇到的问题&#xff0c;我的Assets下有两个文件夹分别是Resources和Scenes&#xff0c;导…

滑动登陆注册同页面

这是一个登陆注册在同一个页面滑动选择的页面 技术&#xff1a;html、css、javascript 简单页面实现&#xff08;为了方便&#xff0c;已将代码放在同一文件引用&#xff09;&#xff1a; 1.1、效果图 1.2、完整代码&#xff1a; <!DOCTYPE html> <html lang"…

金融行业有哪些客户管理系统值得推荐?金融CRM系统选型

市场形式波诡云谲&#xff0c;金融行业也面临着资源体系分散、竞争力后继不足、未知风险无法规避等问题。金融企业该如何解决这些问题&#xff0c;或许可以了解一下Zoho CRM管理系统&#xff0c;和其提供的金融行业CRM解决方案。金融CRM系统可以智能化客户筛选、整合各个资源体…

text、icon、progress、rich-text等基础内容小部件(Widget)组件代码明细

属性说明和代码明细如下&#xff1a; text 文本。 属性说明 属性名类型默认值必填说明user-selectbooleanfalse否文本是否可选&#xff0c;该属性会使文本节点显示为 inline-block 示例代码 TYML <view class"text-page"><view class"page-body…

统计学-R语言-2.2

文章目录 前言导入.RData文件方式1方式2方式3 导入程序包方式一方式二 总结 前言 本篇文章是将上篇得软件安装完&#xff0c;对其部分功能进行介绍。 导入.RData文件 在我们日常练习时会有.RData文件导入&#xff0c;并对其进行分析&#xff0c;下面是两种方导入.RData文件。…