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 多选 点击文字选中的更多相关文章

  1. 点击文字选中radio

    <html><body><form action="" name="form1" method="post"& ...

  2. 点击文字选中checkbox

    <html> <head> <title>test</title> <meta http-equiv="content-Type&quo ...

  3. element-ui Cascader 级联选择器 点击label选中

    通过修改label的样式解决: 注意:el-cascader-panel 是直接挂载在body上的,所以需要全局设置 .el-cascader-panel .el-radio{ width: 100% ...

  4. 点击文字可以选中相应的checkbox

    <html><head><title>中国站长天空-网页特效-表单特效-点击文字选中的复选框</title><meta http-equiv=&q ...

  5. zTree -- jQuery 树插件实现点击文字展开子节点

    新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...

  6. ztree点击文字勾选checkbox,radio实现方法

    ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...

  7. Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

    前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5 ...

  8. radio点击一下选中,再点击恢复未选状态

    radio点击一下选中,再点击恢复未选状态 实现方式1: <input   type="radio"   id="cat"   name="ca ...

  9. checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

随机推荐

  1. 前端web安全-CSRF基础入门

    前言 今天找了个新地方进行学习 嘿嘿  采光不错!特别适合看书呢. 前言 1.CSRF 跨站请求伪造(英语:Cross-site request forgery),也被称为 one-click att ...

  2. C# Random类的正确应用

    Random类介绍 Random类一个用于产生伪随机数字的类.这里的伪随机表示有随机性但是可以基于算法模拟出随机规律. Random类的构造方式有两种. Random r= new Random(). ...

  3. css3系列之transform 详解skew

    skew skewx skewy skewX()  倾斜该元素,里面填的是角度,下面↓ 你会看到,随着元素被倾斜,高度居然不变.聪明的你,一定会知道,高度不变,代表了,Y轴被拉伸了. 跟scale 同 ...

  4. C3PO数据库连接池

    1 <?xml version="1.0" encoding="UTF-8"?> 2 3 -<c3p0-config> 4 5 6 -& ...

  5. Elasticsearch7.7.0安装

    安装 下载解压 elasticsearch-7.7.0-linux-x86_64.tar.gz tar -zxvf elasticsearch-7.7.0-linux-x86_64.tar.gz -C ...

  6. 利用Postman和Chrome的开发者功能探究项目

    利用Postman和Chrome的开发者功能探究项目 controller层研究 前两天忙着写开题报告,没有来得及做项目,今天继续研究一下这个项目. 上次研究到后端的DAO层,研究了一下后端和数据库交 ...

  7. CentOS6.5上增加中文字体库,确保前端WEB可以正常显示

    1 下载字体 可以在网上下载,也可以在 windows 目录下(C:\Windows\Fonts)找到对应字体,这里是从另一套系统上 copy simsun.ttf 文件. 2 查看当前系统中已安装的 ...

  8. vue+element ctrl+s保存写法

    <el-input type="textarea" ref="inppp" v-model="values" placeholder= ...

  9. JJWT 使用示例

    一.添加依赖包 <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-api ...

  10. RestTemplate 统一添加 Header

    一.添加拦截器 public class HeaderRequestInterceptor implements ClientHttpRequestInterceptor { private fina ...