【element-ui】级联选择器不能滚动，而是全部显示出来问题(常用配置属性)

最新推荐文章于 2026-06-19 16:21:09 发布

原创最新推荐文章于 2026-06-19 16:21:09 发布 · 1.8k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

在Vue项目中使用Element-UI的级联选择器时遇到问题，一级分类没有显示滚动条而直接展开所有内容。解决办法是在CSS全局样式表中为el-cascader-panel设置高度。此外，介绍了级联选择器的基本使用，包括options、props、v-model和change等属性。props中的value用于与v-model绑定，label显示分类名称，children处理嵌套数据，expandTrigger定义展开模式。

做vue电商后台项目时使用了element-ui中的级联选择器，数据设置完后发现一级分类下无滚动条，而是将所有内容直接显示了出来，在这里插入图片描述
解决方法
在CSS全局样式表中
给el-cascader-panel添加高度

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

完美解决！
在这里插入图片描述

补充一下级联选择器的基本使用方法

<template>
  <el-cascader
    v-model="selectedCateKeys"
    :options="catelist"
    :props="cateProps"
    @change="handleChange">
  </el-cascader>
</template>
<script>
export default {
    data () {
        return {
            // 商品分类列表
            catelist: [],
            // 级联选择框的配置对象
            cateProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children',
                expandTrigger: 'hover'
            },
            // 级联选择框双向绑定到的数组
            selectedCateKeys: []
        }
    },
    methods: {
		// 级联选择框选中变化，会触发这个函数
        handleChange() {
            console.log(this.selectedCateKeys);
        }
    }
}
</script>

常用属性值
options: 指定数据源，在data中应有对应的数组catelist；
props: 配置选项对象,在data中应有对应的对象cateProps;
v-model:将选中的id的值双向绑定到对应的数组中selectedCateKeys;
change:绑定了选择项改变事件，选择项改变时触发;

props中常见属性
value: 与v-model中的双向绑定挂钩，这里如果绑定了cat_id那么v-model中绑定的就是id指，value就是选中的分类的代名词;
label: 绑定看到的分类名字cat_name
children: 绑定所用的嵌套children
expandTrigger: 绑定触发的模式是点击还是触摸hover

配置成功
在这里插入图片描述