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

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

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

<!--级联选择框-->
<el-cascaderv-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属性表示点击叉可清空选中框内容

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

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