element-UI中级联选择器cascader的问题及解决

-使用新版的cascader,通过官网的代码进行修改

<el-cascader
  :options="parentCateList"
  :props="{ expandTrigger: 'hover', 
   value: 'cat_id',
     label: 'cat_name',
     children: 'children', 
     checkStrictly: true }"
   v-model="selectedKeys"
   @change="parentCateChanged"
   clearable>
</el-cascader>

其中props中增加了expandTrigger属性,对应的配置对象也写在其中,可以任意选择任意一级的选项也放在了里面,将checkStrictly设置为true即可

问题及解决

使用cascader组件时,发现渲染的数据过多时,组件的高度就会占满整个屏幕的高度,而cascader组件不会自动加上滚动条,导致数据缺失,并且对应的二级选项也没渲染出来,要在全局样式中设置菜单的高度,这样就可以解决这一问题

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值