element Cascader 多选 点击文字选中
html 部分
1 <el-form-item label="A部署位置" >
2 <el-cascader
3 v-model="itemType.appSysOptions"
4 :show-all-levels="false"
5 :options="cityOptions"
6 :props="{ multiple: true , expandTrigger: 'hover'}"
7 separator=","
8 size="small"
9 collapse-tags
10 style="width: 195px"
11 filterable
12 clearable >
13 </el-cascader>
14 </el-form-item>
css 部分
1 .el-cascader-panel .el-checkbox {
2 width: 100%;
3 height: 100%;
4 z-index: 10;
5 position: absolute;
6 }
7 .el-cascader-node__label{
8 margin-left: 10px;
9 }
10 /* 这个样式针对IE有用,不考虑IE的可以不用管*/
11 .el-cascader-panel .el-cascader-node__postfix {
12 top: 10px;
13 }
工作总结,转发请注明出处,谢谢。
element Cascader 多选 点击文字选中的更多相关文章
- 点击文字选中radio
<html><body><form action="" name="form1" method="post"& ...
- 点击文字选中checkbox
<html> <head> <title>test</title> <meta http-equiv="content-Type&quo ...
- element-ui Cascader 级联选择器 点击label选中
通过修改label的样式解决: 注意:el-cascader-panel 是直接挂载在body上的,所以需要全局设置 .el-cascader-panel .el-radio{ width: 100% ...
- 点击文字可以选中相应的checkbox
<html><head><title>中国站长天空-网页特效-表单特效-点击文字选中的复选框</title><meta http-equiv=&q ...
- zTree -- jQuery 树插件实现点击文字展开子节点
新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...
- ztree点击文字勾选checkbox,radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
- Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态
前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...
- radio点击一下选中,再点击恢复未选状态
radio点击一下选中,再点击恢复未选状态 实现方式1: <input type="radio" id="cat" name="ca ...
- checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中
checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...
随机推荐
- python应用(1):安装与使用
程序员的基本工作是写程序,而写程序要用到编程语言,编程语言可以分为编译型语言跟解释型语言. 编译型语言,就是在执行代码之前,先把源代码编译(加链接)成另一种形式的代码,比如目标代码,或字节码,这种代码 ...
- 安装swoole扩展
wget https://github.com/swoole/swoole-src/archive/v1.9.3-stable.tar.gz tar -zxvf v1.9.3-stable.tar.g ...
- Vue最简单的实现网页Live2D看板娘
Live2D看板娘 前言 二.使用步骤 1.引入 2.设置样式 结尾(后续更新更强的配置看板娘~) 前言 最近想给自己的网页添点新花样,然后就想到了别人的网站都有一些看板娘的玩意儿,看着很舒服,鉴于自 ...
- Django中ModelForm详解
1.ModelForm组件介绍:这个组件的功能就是把model和form组合起来 2.ModelForm的使用 1.首先需要导入ModelForm from django.forms import M ...
- leetcode 练习--反转链表
最近开始学习数据结构和算法的学习,也自然开始在 leetcode 上练习,所以每周大概会分享做过的leetcode 练习,尽量做到每天更新一道题目. 作为 leetcode 练习笔记的第一道题目,选择 ...
- mysql一条sql语句如何执行的?
mysql 一条sql语句如何执行的? 文章内容源自:极客时间-林晓彬老师-MySQL实战45讲 学习整理 在了解一条查询语句如何执行之前,需要了解下MySQL的基本架构是怎样的,如下图所示: 可以看 ...
- Markdown 语法详解
Markdown 学习 标题 三级标题 四级标题 最多支持六级标题 "#... + 标题名称" 字体 hello, world "** 内容 **" hello ...
- Cloud-Native! 实战 Helm 3 部署 Traefik 2
介绍 Traefik 是什么? Traefik, The Cloud Native Edge Router Traefik 是一种现代 HTTP 反向代理和负载均衡器,用于轻松部署微服务. 这篇文章对 ...
- PyQt(Python+Qt)学习随笔:QDateEdit日期编辑部件和QTimeEdit时间编辑部件
专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 Designer输入部件中,Date Edit和T ...
- 转:Python考核试题及答案
Python测试(总分:120) 选择题(每题2分,共20分) 1.下列哪个语句在Python中是非法的? (B) A.x = y = z = 1 B.x = (y = z + 1) C.x, y = ...