解决element-ui的Cascader 级联选择器展示问题

最新推荐文章于 2024-04-26 16:52:30 发布
最新推荐文章于 2024-04-26 16:52:30 发布
阅读量804 收藏 1
点赞数 1
文章标签： html elementui css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/enhenglhm/article/details/120326625
版权

所有数据全部展示出来了这就很离谱，很不美观

 

在遨游了互联网 ，终于找到一个合适的解决方法

在global.css中设置  解决啦

.el-cascader-menu {
    height: 300px;
}

 

一切变得完美

Cascader 级联选择器注意问题：

注意看文档，一些属性已经更改变化了，大多变到了props属性中

 

 

 

小猿L
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于element中联级选择器el-cascader单选，选中复选框联级模态框立即消失
Gemming_的博客
08-03 1938
如图，此联级选择器设置为单选，所以用户点击左侧单选框选中后，需要点击其他空白地方才选择框能消失，如果联级选择器在较小的dialog弹窗的表单中，点击其他地方，弹窗和选择器都直接消失了，用户体验非常的不友好，如果是单选的话，所以一旦选中的话，界面就没有必要显示了。想要实现选中立即隐藏这里可以使用this.$refs.[“联级选择器的ref值”].dropDownVisble = false,代码如下： //el-cascader的change事件,saveOrgTree是联级组件的ref checkedCh.
elementUi cascader 级联动组件 hover 收起二级菜单
青蛙背蝎子过河的博客
02-18 2788
最近一直和这个组件打交道, 有多个地方不太完美, 一开始领导让先这么用着, 后期再优化. 最近把几个不完美的地方优化了下. 写下此篇. 让遇到此问题的朋友少走类似的弯路. 先简单说下问题, 这个组件默认是点击option, 下拉框就隐藏. 但当我们开启了触发方式为hover的时候, 也就是expandTrigger: 'hover' 的时候. 这个时候点击option...
element-Ui中新版级联选择器cascader无法显示完整数据解决方法
lilQz的博客
04-22 3138
新版cascader组件会因为数据过长导致菜单面板撑满屏幕且数据无法渲染完整也没有滚动条，如图 解决方法：在全局样式设置菜单面板高度（只能在全局设置，在组件中使用无法生效） .el-cascader-panel { height: 300px; } 解决后效果: ...
实现 ＜el-cascader＞ 组件的回显功能
CC酱写前端的博客
04-26 771
vue A页面，用户填写了el-cascader多层级数据，层级list数据从接口获取；vue B页面，多层级数据要进行回显，接口给到的数据是value值；
elementui Cascader 级联选择使用心得
codingLeader的博客
08-05 4162
Element cascader遇到的问题
Vue Element-UI Cascader 级联选择器中子菜单的显示与隐藏
Pure_Sunshine的博客
12-16 4057
Vue Element-UI Cascader 级联选择器中子菜单的显示与隐藏
详解element-ui级联菜单（城市三级联动菜单）和回显问题
10-16
`<el-cascader>`是Element-UI用于创建级联选择器的组件。在示例代码中，我们看到`v-model`绑定到`ruleForm.censusLand`，这使得菜单选择的值可以双向绑定到数据模型。级联菜单的配置项包括`placeholder`（占位提示）...
elp-cascader:基于'element-ui'和'vue-virtual-scroller'的Vue组件
05-28
elp-cascader Cascader based on 'element-ui' and 'vue-virtual-scroller'@vueblocks/elp-cascader基于element-ui和vue-virtual-scroller的级联选择器，用虚拟列表的方式逐级渲染列表。适用于数据量较大的场景。...
Element Cascader 级联选择器的使用示例
10-15
在级联选择器中，`v-model` 绑定的 `value` 是用户选定的值，它是一个数组，通常包含了用户选择的每一级的值。 2. **options**：这是一个包含所有选项的数据对象，每个选项都有 `value` 和 `label` 属性，分别代表...
element-china-area-data：Element UI && antd Cascader级联选择器中国省市区三级，二级联动optiondata
02-06
Element UI中国省市区级联数据 安装 npm install element-china-area-data -S 在线示例 使用 import { provinceAndCityData , regionData , provinceAndCityDataPlus , regionDataPlus , CodeToText , TextToCode }...
element-plus---Cascader三级联动地区选择---json数据
08-19
Element Plus是一个流行的Vue.js组件库，它提供了丰富的UI组件，包括Cascader（级联选择器），适用于这种需求。在这个场景中，"element-plus---Cascader三级联动地区选择---json数据" 主题指的是使用Element Plus的...
element-ui级联选择器中二三级列表无法显示的解决办法
代码在路上的博客
02-27 1075
记： <el-cascader :options="parentCateList" :props="cascaderProps" v-model="selectedKeys" @change="parentCateChanged" clearable> </el-cascader> cascaderProps: { expandTrigger: 'hover', checkStrictly: t
el-cascader 子级为空时不显示问题/只展示到相应层级
m0_52545254的博客
06-08 3038
这个和上面的区别就是，不管三级之后有没有数据，children是否为空，都给删除掉了。但是二级没有子级的时候还是会展示三级的暂无数据空白项。使用element-ui的el-cascader级联组件时，当子级为空时，会展示暂无数据的的空白页，要求是无数据的不展示。还有一个需求是，只展示到三级，三级之后的子级不再展示。
【Element-ui】Cascader 级联选择器在emitPath设置为false时，选中内容后不显示。 问题原因及解决方法
Simle_Tiny_horse的博客
03-02 9507
Element-ui 级联选择器选中选项后不显示
el-cascader 动态加载选项、编辑时数据回显问题 、单选不加载下一级节点、点击标签选中
热门推荐
风间琉璃c
03-24 2万+
el-cascader 动态加载选项 以及编辑时数据回显问题
el-cascader 级联选择器没有子级的时候不能选择
aigan8378的博客
08-19 3121
如果子级为空,将子级置为undefined,父级即可选中parent.map(item=>{ if(item.childrens.length==0){ item.childrens=undefined; }}) 转载于:https://www.cnblogs.com/shenssr/p/11375661.html...
element-ui中级联选择器Cascader使用中遇到的意想不到的空白
Rory3的博客
06-10 846
事故现场 如题，笔者在使用级联选择器的时候，明明选中了选项，但是页面并没有展示，而是展示为空，如下图所示 寻找原因 控制台打印出来的所有数据都是没有问题的，绑定的model也显示正常，折让我百思不得其解，最后只能请教我们公司的前端大神，大神帮我看后，看到控制台打印的信息，直接说绑定的value值重复了，系统渲染不明白了。 比如，我处理后的data如下图所示 [ { "value": 1, "label": "仓库#1", "children": [ {
el-cascader级联展开时,无法定位到子节点,去除末节点的children
蜗牛快爬
06-29 2582
前端替换字符串的效率还是很高,所以不用过于担心会影响效率,当然数据量很大的话最好在后台处理.
解决vue3中el-cascader(没有单选框)选择以后下拉框消失
m0_73293533的博客
02-06 704
vue3中element-plus解决联级选中勾选按钮以及弹框的消失
element-ui中el-cascader级联选择器多选判断是否是全选
最新发布
06-28
在Element UI中的`el-cascader`级联选择器组件，如果需要实现多选并判断是否所有选项都被勾选为全选状态，你可以使用`@change`或`@input`事件监听用户的交互。当你获取到`value`（用户选择的值）时，可以通过遍历这...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值