Element-UI中Cascader 级联选择器使用

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>

7
8

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)
		}
	}	
}

7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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

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

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

1
2
3
4