​Element-UI的级联组件官方文档​

<el-cascader
v-model="value"
:options="options"
:props="{ expandTrigger: 'hover' }"
@change="handleChange">
</el-cascader>

说明:
options:绑定数据源
props:数据配置项
v-model=“value”:双向绑定级联选择框中选中的value值
@change=“handleChange” :当级联选择框变化,触发handleChange事件,可返回选中项的值
使用:

<!--级联选择框-->
<el-cascader
v-model="selectedKeys"
:options="parentList"
:props="cascaderProps"
@change="parentCateChange"
clearable></el-cascader>
export default(){
data(){
return {
//选中项的cat_id数组
selectedKeys:[],
//数据源信息
parentList:{},
//数据的配置信息
cascaderProps:{
//可以选中一级内容
checkStrictly:true,
//指定触发方式
expandTrigger: 'hover',
//数据源parantList中的cat_id做数据绑定
value:'cat_id',
//数据源parantList的cat_name渲染出来的内容
label:'cat_name',
//数据源parantList的children做嵌套
children:'children'
}
}
},
methods:{
handleChange(){
console.log(this.selectedKeys)
}
}
}

注:·el-cascader中的clearable属性表示点击叉可清空选中框内容

Element-UI中Cascader 级联选择器使用_数据源

如果出现一级分类菜单沾满全屏的现象:
在全局样式的global.css中添加一下面样式即可(在页面中都会生效)

.el-scrollbar__wrap {
height: 300px !important
}