若依 ruoyi-vue element-ui el-cascader 级联选择器 选择任意一级选项,去掉单选按钮,选中点击后隐藏

Cascader 级联选择器 选择任意一级选项,去掉单选按钮。
这兄弟文章写的可以,查了一堆文章,基本搞完才发现。

官方的例子不支持选中后自动关闭,要点击旁边空白,并且单选框太小了。
在这里插入图片描述

              <el-form-item label="所属地域" prop="areaCode">
                <el-cascader
                    style="width: 100%"
                    ref="cascader"
                    v-model="form.areaCode"
                    :options="tzSysTreeDictOptions"
                    @change="handleCascaderChange"
                    :props="{ expandTrigger: 'hover', label: 'name' ,emitPath: false,checkStrictly: true }"
                    placeholder="选择所属地域"
                />
              </el-form-item>
    handleCascaderChange(){
      this.$refs.cascader.dropDownVisible = false;
    },

全局样式

//el-cascader 单选框不显示,点击即选中
.el-radio__inner {
  border-radius: 0;
  border: 0;
  width: 170px;
  height: 34px;
  background-color: transparent;
  cursor: pointer;
  box-sizing: border-box;
  position: absolute;
  top: -18px;
  left: -19px;
}

.el-radio__input.is-checked .el-radio__inner {
  background: transparent;
}

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

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

相关文章

CSS双飞翼布局

双飞翼布局是一种经典的CSS布局模式&#xff0c;主要用于实现左右两列固定宽度&#xff0c;中间列自适应的布局。 比如&#xff1a;写一个左中右布局占满全屏&#xff0c;其中左、右两块固定宽 200px&#xff0c;中间自适应&#xff0c;要求先加载中间块。 <!DOCTYPE html…

一文看懂llama2(原理模型训练)

自从Transformer架构问世以来&#xff0c;大型语言模型&#xff08;Large Language Models, LLMs&#xff09;以及AIGC技术的发展速度惊人&#xff0c;它们不仅在技术层面取得了重大突破&#xff0c;还在商业应用、社会影响等多个层面展现出巨大潜力。随着ChatGPT的推出&#x…

Nginx02-Nginx虚拟主机介绍、日志介绍、Location规则介绍

目录 写在前面NginxNginx处理用户请求流程虚拟主机虚拟主机的分类基于域名的虚拟主机基于端口的虚拟主机基于IP的虚拟主机 Nginx日志错误日志案例 访问日志访问格式变量案例 Location规则案例1案例2Location规则小结 写在前面 这是Nginx第二篇&#xff0c;内容为Nginx处理用户请…

【WEB系列】过滤器Filter

Filter&#xff0c;过滤器&#xff0c;属于Servlet规范&#xff0c;并不是Spring独有的。其作用从命名上也可以看出一二&#xff0c;拦截一个请求&#xff0c;做一些业务逻辑操作&#xff0c;然后可以决定请求是否可以继续往下分发&#xff0c;落到其他的Filter或者对应的Servl…

mysql中optimizer trace的作用

大家好。对于MySQL 5.6以及之前的版本来说&#xff0c;查询优化器就像是一个黑盒子一样&#xff0c;我们只能通过EXPLAIN语句查看到最后 优化器决定使用的执行计划&#xff0c;却无法知道它为什么做这个决策。于是在MySQL5.6以及之后的版本中&#xff0c;MySQL新增了一个optimi…

量化投资分析平台 迅投 QMT(三)字典数据下载后读取成Dataframe形式

量化投资分析平台 迅投 QMT [迅投 QMT](https://www.xuntou.net/?user_code7NYs7O)我目前在使用如何读取下载好的数据出来上代码历史帖子 迅投 QMT 我目前在使用 两个月前&#xff08;2024年4月&#xff09;迅投和CQF有一个互动的活动&#xff0c;进行了平台的一个网上路演&…

初始C++(类与对象)

感谢大佬的光临各位&#xff0c;希望和大家一起进步&#xff0c;望得到你的三连&#xff0c;互三支持&#xff0c;一起进步 个人主页&#xff1a;LaNzikinh-CSDN博客 文章目录 前言一.引用二.内联函数三.类和对象总结 前言 之前讲c的命令空间和第一个程序的运行&#xff0c;继…

adb shell service命令与SurfaceFlinger调试

“ 在Android上有丰富的shell命令便于开发者用来调试程序&#xff0c;非常方便&#xff0c;本文简单说明下service命令的用法。” 01 基本用法 首先看一下使用说明&#xff0c;带上参数-h 或 -&#xff1f; $ adb shell service -h Usage: service [-h|-?]service listservi…

STM32 MDK Keil5软件调试功能使用(无需连接硬件)

MDK Keil5 在线仿真STM32&#xff08;无需连接硬件&#xff09; 首先点击工具栏的魔术棒配置一下&#xff1a;&#xff08;记得选择自己的STM32芯片类型&#xff09; 开启调试 使用逻辑分析仪查看IO输出 会打开这个界面&#xff0c;点击左边的setup按钮 会打开这个窗口&am…

交易量突破 3000 亿美元,去中心化衍生品协议 APX Finance 成最大的黑马?

“APX Finance 总交易量现已突破 3000 亿美元&#xff0c;已然成为链上衍生品赛道的主力军” 自 2021 年链上衍生品市场进入萌芽期以来&#xff0c;该板块始终保持着较高的市场增速&#xff0c;即便如此该领域仍旧存在极大的发展空间。一方面&#xff0c;衍生品板块交易量目前占…

【Kubernetes】k8s集群的污点、容忍、驱逐 以及排障思路

污点和容忍以及驱逐 一、污点&#xff08;Taint&#xff09; 污点介绍 节点亲和性&#xff0c;是Pod的一种属性&#xff08;偏好或硬性要求&#xff09;&#xff0c;它使Pod被吸引到一类特定的节点。Taint 则相反&#xff0c;它使节点能够排斥一类特定的 Pod。 Taint 和 Tol…

Docker 常用命令以及镜像选择

前言-与正文无关 生活远不止眼前的苦劳与奔波&#xff0c;它还充满了无数值得我们去体验和珍惜的美好事物。在这个快节奏的世界中&#xff0c;我们往往容易陷入工作的漩涡&#xff0c;忘记了停下脚步&#xff0c;感受周围的世界。让我们一起提醒自己&#xff0c;要适时放慢脚步…

PS系统教程12

画笔模式-绘画模式 相反组&#xff1a;理解一组即可 叠加、柔光重点理解&#xff0c;后面只是细微的差别差值-排除相当于胶卷留下的底片那样的效果。 正常和溶解的对比 正常-背后 效果&#xff1a;重叠的部分在就图层后面。 清楚与橡皮擦一样。 变暗 原理&#xff1a;比这个…

数学建模笔记

数学建模 定义角度 数学模型是针对参照某种事物系统的特征或数量依存关系&#xff0c;采用数学语言&#xff0c;概括地或近似地表述出的一种数学结构&#xff0c;这种数学结构是借助于数学符号刻画出来的某种系统的纯关系结构。从广义理解&#xff0c;数学模型包括数学中的各…

Linux系统之mv命令的基本使用

Linux系统之mv命令的基本使用 一、mv命令介绍1. mv命令简介2. mv命令的使用结果 二、mv命令的使用帮助1. 在命令行的帮助信息2. mv常用选项 三、mv命令的基本使用1. 创建源目录和目标目录2. 新建测试文件3. 将源目录文件复制到目标目录4. 将文件进行改名5. 将目录的所有文件转移…

Windows下使用Airsim+QGC进行PX4硬件在环HITL(三)

Windows下使用AirsimQGC进行PX4硬件在环HITL This tutorial will guide you through the installation of Airsim and QGC on Windows, so that the hardware-in-the-loop experiment can be conducted. Hardware-in-the-Loop (HITL or HIL) is a simulation mode in which nor…

功效系数法

功效系数法&#xff08;Efficacy Coefficient Method&#xff09;是一种综合评价方法&#xff0c;它根据多目标规划的原理&#xff0c;对每个评价指标确定一个满意值和不允许值&#xff0c;以满意值为上限&#xff0c;以不允许值为下限。计算各指标实现满意值的程度&#xff0c…

以太网扫盲(四)phy驱动link up流程分析

1. 简介 在调试网口驱动的过程中发现phy芯片的驱动框架结构还有点复杂&#xff0c;不仔细研究的话还不好搞懂&#xff0c;另外百度到的资料也不够全面&#xff0c;这篇就总结梳理一下这方面的知识。 我们知道一个 phy 驱动的原理是非常简单的&#xff0c;一般流程如下&#x…

AI视频教程下载:给初学者的ChatGPT提示词技巧

你是否厌倦了花费数小时在可以通过强大的语言模型自动化的琐碎任务上&#xff1f;你是否准备好利用 ChatGPT——世界上最先进的语言模型——并将你的生产力提升到下一个水平&#xff1f; ChatGPT 是语言处理领域的游戏规则改变者&#xff0c;它能够理解并响应自然语言&#xf…