Cascader 级联选择器组件的高度过高问题
解决当我们在使用级联选择器时由于data
中的 options
循环项过多时,级联选择器的高度被撑满全屏
看一下当时代码
<div class="block">
<el-cascader
v-model="value"
:options="options"
:props="{
expandTrigger: "hover",
value: "cat_id",
label: "cat_name",
children: "children"
}"
@change="handleChange">
</el-cascader>
</div>
<script>
export default {
data() {
return {
value: [], //存储值
options: [....] //循环项(由于代码过多,这里就不全部复制出来了)
}
},
method:{
handleChange(value){
console.log(value)
}
}
展示一下当时我的 效果图
1.大家发现这里我的高度已经被撑满全屏了,开始我的想法跟大家一样,通过审查元素找到该元素,在该VUE组件下的私有 <style scoped lang="less"></style>
样式设置宽高,但发现没有效果
现在公布一下我当时的解决方法
解决方法一
// 在全局的公共 css 样式中设置为 .el-cascader-panel
添加高度
.el-cascader-panel{
height: 200px;
}';
解决方法二
// 通过vue的生命周期函数手动为 .el-cascader-panel 设置高度
document.getElementsByClassName('el-cascader-panel')[0].style.height = '200px';