2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > elementui级联选择器Cascader不触发change事件

elementui级联选择器Cascader不触发change事件

时间:2024-05-17 06:33:45

相关推荐

elementui级联选择器Cascader不触发change事件

使用级联选择器时,需求是选择最后一级,同时选择之前的父级标签,看这个需求明明很简单,人家自带的组件就是这样,但是却一直无法触发绑定的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)}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。