使用级联选择器时,需求是选择最后一级,同时选择之前的父级标签,看这个需求明明很简单,人家自带的组件就是这样,但是却一直无法触发绑定的change事件,只有添加props.checkStrictly = true时才可以触发,但是不能实现需求。
分析方法:首先组件的功能肯定是没问题的,因为从官网copy下来之后我用原始的数据尝试,完美实现需求
<div class="block"><span class="demonstration">默认显示所有Tag</span><el-cascader:options="options":props="props"@change="handleChange"clearable></el-cascader></div><div class="block"><span class="demonstration">折叠展示Tag</span><el-cascader:options="options":props="props"collapse-tagsclearable></el-cascader></div><script>export default {data() {return {props: {multiple: true },options: [{value: 1,label: '东南',children: [{value: 2,label: '上海',children: [{value: 3, label: '普陀' },{value: 4, label: '黄埔' },{value: 5, label: '徐汇' }]}, {value: 7,label: '江苏',children: [{value: 8, label: '南京' },{value: 9, label: '苏州' },{value: 10, label: '无锡' }]}, {value: 12,label: '浙江',children: [{value: 13, label: '杭州' },{value: 14, label: '宁波' },{value: 15, label: '嘉兴' }]}]}, {value: 17,label: '西北',children: [{value: 18,label: '陕西',children: [{value: 19, label: '西安' },{value: 20, label: '延安' }]}, {value: 21,label: '新疆维吾尔族自治区',children: [{value: 22, label: '乌鲁木齐' },{value: 23, label: '克拉玛依' }]}]}]};}};</script>
但是将options替换成服务器返回的数据,虽然也可以正常显示选择器中的内容,但是选择之后v-model绑定的变量和change事件都没有触发,定位到问题就是数据,分析一下返回的数据和element官网的样例,发现,返回的数据里面虽然每个都有children属性,但是如果没有子菜单,也会增加一个空的children属性,定位到问题所在,就好办了,只需要写一个递归函数处理数据就行了,补充一句:服务器返回的数据字段名也不是element要求的,有时候后端不改咱们自己就处理了,虽然有点麻烦,也挺锻炼自己的思维能力。
// 返回的数据options:[{userId: 123,userName: 'xiaoming',children:[{userId: 456,userName: '笑话',children: []},{userId: 678,userName: 'abc',children:[]}]},{userId: 234,userName: 'qwe',children: []}]
// 处理数据方法changeKey(arr) {for (var i=0; i<arr.length; i++) {arr[i].value = arr[i].userIdarr[i].label = arr[i].userNameif (arr[i].children.length) {this.changeKey(arr[i].children)} else {delete arr[i].children}}]
完美触发
handleChange(val) {console.log(val)}
如果觉得《elementui级联选择器Cascader不触发change事件》对你有帮助,请点赞、收藏,并留下你的观点哦!