Element UI框架bug:Element UI级联选择器高度bug解决

element框架级联选择器的高度无法控制的bug

代码显示:

先去element官方文档 https://element.eleme.cn/#/zh-CN/component/cascader里面去引用级联选择器。

  • 代码应用
 <el-cascader
    expand-trigger="hover"
     v-model="selectedCateKeys"
     :options="catelist"
     :props="cateProps"
     @change="selectedChange"
 ></el-cascader>

BUG显示:

Element UI框架bug:Element UI级联选择器高度bug解决_第1张图片

错误分析:

给级联选择器双向数据绑定值之后,可以发现在页面中级联选择器的下拉框特别的长,查看element官方文档可以发现,没有修改高度的属性,然后我去当前vue文件的style里面去修改样式发现也不行。

解决办法:

  • 先F12检查元素,找到对应的DOM节点处。
  • 找到影响整个级联选择器的两个标签。
  • 然后定义一个全局的css文件。
  • 在main.js中引用css文件。
  • 在全局的css文件中改变级联选择器的高度。

具体代码:

1.先F12检查元素,找到对应的DOM节点处,找到影响整个级联选择器的两个标签。
Element UI框架bug:Element UI级联选择器高度bug解决_第2张图片
2.然后定义一个全局的css文件,在main.js中引用css文件。

Element UI框架bug:Element UI级联选择器高度bug解决_第3张图片
3.在全局的css文件中改变级联选择器的高度。

.el-cascader__dropdown {
  height: 200px;
}
.el-cascader-panel {
  height: 200px;
}

效果展示:

Element UI框架bug:Element UI级联选择器高度bug解决_第4张图片

你可能感兴趣的:(vue,Element)