关于element中联级选择器el-cascader单选，选中复选框联级模态框立即消失

最新推荐文章于 2024-06-25 09:45:45 发布

Gem__

最新推荐文章于 2024-06-25 09:45:45 发布

阅读量1.9k

点赞数

分类专栏： Vue elementUI

本文链接：https://blog.csdn.net/Gemming_/article/details/107776165

版权

本文讨论了在Element UI的级联选择器（el-cascader）中，如何解决单选模式下选中后仍需点击其他区域才能关闭的问题。当级联选择器位于小尺寸的对话框内时，选中后直接关闭对话框会导致用户体验下降。为改善此问题，文章提出了在选中后通过this.$refs.["联级选择器的ref值"].dropDownVisible = false的代码实现选中即隐藏，从而提升用户体验。

摘要由CSDN通过智能技术生成

在这里插入图片描述
如图，此联级选择器设置为单选，所以用户点击左侧单选框选中后，需要点击其他空白地方才选择框能消失，如果联级选择器在较小的dialog弹窗的表单中，点击其他地方，弹窗和选择器都直接消失了，用户体验非常的不友好，如果是单选的话，所以一旦选中的话，界面就没有必要显示了。想要实现选中立即隐藏这里可以使用this.$refs.[“联级选择器的ref值”].dropDownVisible = false,代码如下：

//el-cascader的change事件,saveOrgTree是联级组件的ref
checkedChange(){
   
	let node = this.refs.saveOrgTree.get

最低0.47元/天解锁文章

Gem__

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
关于element中联级选择器el-cascader单选，选中复选框联级模态框立即消失

如图，此联级选择器设置为单选，所以用户点击左侧单选框选中后，需要点击其他空白地方才选择框能消失，如果联级选择器在较小的dialog弹窗的表单中，点击其他地方，弹窗和选择器都直接消失了，用户体验非常的不友好，如果是单选的话，所以一旦选中的话，界面就没有必要显示了。想要实现选中立即隐藏这里可以使用this.$refs.[“联级选择器的ref值”].dropDownVisble = false,代码如下：//el-cascader的change事件,saveOrgTree是联级组件的refcheckedCh.
复制链接

扫一扫