elementUi Cascader 级联选择器如何选择任意一级,以及所遇到的问题
2020-07-18 05:19
2411 查看
1.拿到需求要实现级联选择器并且可以选择任意一级。运用elementUi 的cascader 组件,这个组件默认情况下是严格遵守父子节点互相关联的。要实现可以选择任意一级,那就要给任意一级设置可选择属性。官网提供的:props="{ checkStrictly: true }"解除父子节点互相关联。
2.问题来了。。。
设计师不想要前面的单选按钮,并且直接点击lable即可选中效果。
(1)想办法把单选按钮拿掉,第一时间想到的办法就是css将其隐藏
.el-radio { color: #606266; cursor: pointer; visibility: hidden; // 加上这一行 margin-right: 30px; }
(2)怎么让点击文字也有选中效果呢,翻了官网没有提到。。去瞅源码吧
原来change事件是注册在radio上的
而redio后面的这个span并没有注册事件
那只要在span上手动注册组件去调用radio的事件就行了
mounted () { setInterval(function () { document.querySelectorAll('.el-cascader-node__label').forEach(el => { el.onclick = function () { if (this.previousElementSibling) this.previousElementSibling.click() } }) }, 1000) },
到这里大功告成
效果。。。。
结果又遇到了另一个问题,果然坑真的多、、、、
理想状态下,是选中之后下拉马上收起,但是现有的组件不支持
网上找了很多办法说把 dropDownVisible 属性设置为 false 即可,我亲自尝试了很多次,根本无效,不知道那些大神们是怎么起到作用的
this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
以上代码亲测无效。。。
暂时没找到这个问题的比较好的解决办法,为了收起下拉框,我在选中后加了一个二次确认框,完美的避开了这个问题,哈哈哈、、、
相关文章推荐
- 如何获取到element ui 中Cascader 级联选择器里label的值
- element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)
- 使用element UI Cascader 级联选择器实现简单的选择生日日期的功能(没有年份)
- 【element-ui】级联选择器不能滚动,而是全部显示出来问题(常用配置属性)
- Vue使用element.js的级联选择器高度不正常,如何解决高度溢出问题?
- element-ui 中 Cascader 级联选择器同时获取value值和label值
- el-cascader级联组件动态加载数据允许选择任意一级的选项
- element-ui 级联选择器 el-cascader更改v-model值为字符串后报错
- element-ui 获取级联选择器label值相关的问题
- elementui cascader 级联选择器 清空、重置
- 使用element-ui datepicker时间日期选择器遇到的问题
- 【element-ui】日期时间选择器如何控制某时段时间不能选择
- 一个ButtonDemo序(遇到的问题,以及在大牛的帮助下,如何解决的。)
- 最近在做ShareSDK的微信分享的时候遇到了点问题,就是分享的时候选择微信好友或者微信朋友圈会打开一下微信然后界面都还没加载出来就闪退。这个问题我在网上找了好多种的可能的情况以及处理办法,最终找到了
- shareSDK分享平台分享内容出去显示“来自XXX”的问题及其如何修改分享菜单的背景图片以及调用无UI方法自定义UI分享
- 使用Element-ui的DatePicker日期选择控件时发起请求时少一天问题
- 如何生成ssh key,以及repo init 遇到的无法检查签名:找不到公钥 问题
- vue+elementUI 关于日期选择器的disabledDate问题
- 详解关于element级联选择器数据回显问题
- vue-cli4下按需加载element-ui遇到的问题