<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
属性表示点击叉可清空选中框内容