element级联选择器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>

<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: []
  }
]

处理数据的方法思路就是遍历数组，如果children长度为0就删掉

// 处理数据方法
changeKey(arr) {
	for (var i=0; i<arr.length; i++) {
		arr[i].value = arr[i].userId
		arr[i].label = arr[i].userName
		if (arr[i].children.length) {
			this.changeKey(arr[i].children)
		} else {
			delete arr[i].children
		}
	}
]

完美触发

handleChange(val) {
	console.log(val)
}