Cascader级联选择器
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。
直接上代码
//html
<el-cascader
:props="defaultParams"
:options="areaData"
v-model="selectedOptions"
change-on-select
@change="handleChange">
</el-cascader>
其中属性change-on-select用于任意一级菜单的选项的选择
js结构
export default {
data(){
return {
areaData: [],
selectedOptions: [],
defaultParams: {
label: 'areaName',//要显示元素的名称
value: 'areaId'//显示元素对应的id
children: 'childrens'//子集名称
},
}
}
methods:{
handleChange(value) {
console.log(value);
this.cityId= value[1]//选中一级id
this.proviceId=value[0]//选中二级id
},
}
}
以上是我工作中一些功能总结和记录,欢迎大家一起交流