elementui级联选择器
element-ui 级联选择器 Cascader 选择任意一级选项去掉圆圈和点击label标签可选,选择完之后下拉框自动回收
解决方法:
1.
这样的话效果是实现了,但是存在两个问题:
1、只能点击圆圈才能选中,点击文字 label 没有效果;
2、点击圆圈后理想是自动收起下拉,但这个是点击下拉框之外的地方才可以收起。
解决办法如下,但是原理不太清楚(很惭愧,先记录下吧)
1、点击文本就让它自动点击前面的input就可以触发选择。但是因组件阻止了冒泡,暂时想不到好方法来触发。(这种比较耗性能,暂时想不到其他的,能实现效果了。)
mounted() {
setInterval(function() {
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling) this.previousElementSibling.click();
};
});
}, 1000);
},
2、设置每次监听值变化的时候,把 dropDownVisible 属性设置为 false 即可(在这解释下handlerValue和refs.refHandle,handlerValue是v−model绑定的值,ref类似于获取这个元素,不止table里有ref,其他标签你都可以用ref,然后通过this.refs.refHandle,handlerValue是v-model绑定的值,ref类似于获取这个元素,不止table里有ref,其他标签你都可以用ref,然后通过this.refs.refHandle,handlerValue是v−model绑定的值,ref类似于获取这个元素,不止table里有ref,其他标签你都可以用ref,然后通过this.refs.xxx来获取,这里ref=‘refHandle’)
watch: {
handlerValue() {
if (this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
}
}
}
最近一个需求在使用到Element UI Cascader级联选择器中的选择任意一级选项这个组件的时候,这个组件在最新2.13版本的时候前面多了一个圆圈,只有点击圆圈的时候才代表选中,点击文字不会被选中,而我的需求是需要点中文字则选中,经过爬坑总结出一个方法,简单的说就是改变前面圆圈的样式来进行实现的,现记录一下,上代码
.el-cascader-panel .el-radio {
width: 100%;
height: 100%;
z-index: 10;
position: absolute;
top: 0px;
right: 10px;
}
.el-cascader-node__label {
width: 157px;
}
.el-cascader-panel .el-radio__input {
visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
top: 10px;
}
如有不对的地方欢迎指正
上述解决方法链接:
https://www.cnblogs.com/web-cuicui/p/12629079.html
https://zhuanlan.zhihu.com/p/151638286
注:我是将样式的修改放在全局样式中
elementui级联选择器相关推荐
- element-UI级联选择器(Cascader)获取label值 - 代码篇
element-ui级联选择器(Cascader)获取级联对象 :主要是想获取:label值.value值 效果图预览: 代码参考如下: <el-cascaderref="cascad ...
- element-UI级联选择器(Cascader 回显、默认显示项) - (返回结果的)格式转化 - 代码篇
el-cascader组件 :(返回结果的)格式转化 有时候会报错:TypeError: thsAreaCode.replace is not a function (bug截图如下) 说白了就是该组 ...
- 解决ElementUI级联选择器的禁用样式问题
解决ElementUI级联选择器的禁用样式问题 发现问题 解决 写在最后 发现问题 最近我在项目中使用到了ElementUI级联选择器,不得不说ElementUI真的很强大(老师说在批评一个人的缺点之 ...
- 记录element-ui级联选择器,二级三级列表无法显示的解决办法
<!-- 选择商品分类的级联选择框 --><el-cascader expand-trigger="hover" :options="catelist& ...
- elementui级联选择器空children导致选择无法显示的问题
问题 elementui接收树形结构的数据并用级联选择器显示时,后端会对每一个结点都加一个children属性,导致显示错误并且选择无效. 解决方式 这个时候,既可以前端工程循环遍历将children ...
- vue element-ui级联选择器选中后下拉框自动收起
Cascader 级联选择器 数据渲染 通过 :options="options" 映射,让每一级都可以选择(选项前会有圆圈可勾选)设置属性 :props="{ chec ...
- elementui级联选择器Cascader不触发change事件
使用级联选择器时,需求是选择最后一级,同时选择之前的父级标签,看这个需求明明很简单,人家自带的组件就是这样,但是却一直无法触发绑定的change事件,只有添加props.checkStrictly = ...
- element-ui 级联选择器el-cascader踩坑
1.el-cascader 组件选中 - X图标清空 - 点击选择器,然后会发现下拉框中清空之前的数据选中还在高亮.当级联选择器内容需要动态变化时,会爆出Cannot read property 'l ...
- elementui级联选择器懒加载回显亲测有效
记录一下自己挣扎迷茫的一天,如果有同样遇到级联选择器要回显的同志,希望你早点看到这篇日志.进入正题,如何在懒加载上回显. //组件上写法 <el-cascader:options="l ...
最新文章
- mysql中的枚举enum_mysql中枚举类型之enum详解
- Golang 标准库log的实现
- CentOS Squid 安装配置
- 使用 .NET 升级助手将.NET Framework应用迁移到.NET 5
- thinkphp5记录
- 大数据开发初学者学习路线
- HTML5摩托车配件销售商城模板
- pytorch中hook的使用
- Java应用在docker环境配置容器健康检查
- matlab导入vgg16,简单导入VGG16
- 高通9008固件下载备份工具
- mac无线连接打印机进行打印和扫描
- 网页版网络聊天室设计与实现(Java+SSH+MySQL)
- Ubuntu连接WIFI并开启热点
- 弗吉尼亚理工大学计算机科学,弗吉尼亚理工大学计算机科学排名第45(2020年TFE美国排名)...
- SpringBoot整合Dubbo
- 二维码图片如何快速生成
- python pywin32 的学习笔记
- 双精度浮点数double
- traceroute命令(unix)/tracert命令(windows)