-使用新版的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;
}