element-ui 级联选择器Cascader设置默认值无效

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

最近遇到的一个新需求，我们在页面中编辑时需要修改之前级联选择器选择的资源，正常的思路就是点击编辑，跳转编辑页面，传入row的值就可以正常显示之前的值，并且可以进行后续修改操作了。

但是这次无效了，失效的方式竟然是不显示Label，点开级联选择器，传入的值是被选中的状态，最开始觉得是需要传一个数组，把数据放到数组里放到v-model绑定的变量，依旧不能显示label。。

<el-form-item v-if="options.length>0" label="资源名称" prop="sourceId">
   <el-cascader
       v-model="ruleForm.sourceId"
       :options="options"
       @change="handleChange"
     >
    </el-cascader>
</el-form-item>

data() {
	return {
		ruleForm: {
			sourceId: []
		},
		props: { mutiple: false, checkStrictly: true, expandTrigger: 'hover' }
	}
},
method:{
	handleChange(value) {
		console.log(value)
		console.log(this.ruleForm)
	}
}

看了官方文档我们知道可以使用v-model绑定数据，设置初始值/默认值，对比了触发handleChange和传入值时的ruleForm，发现sourceId的值也没什么区别。。但是最开始使用官方案例还可以用，这是为什么呢？

分析：从逻辑上讲应该没有问题，value正常但是label就是不显示。重新捋一遍思路，问题肯定出在数据上，原来是因为我们从el-table中的row里面获取值，传入之后默认都是string类型，而放入数组也是string，官方要求数组内的数据时Number类型，所以组件不会识别，无法显示label。

究其根本，其实问题还是出在了数据类型上面，虽然传入的都是数组，但数组里面的元素不同啊，这也太坑了，需要每次传值的时候处理一下数据，这里直接把传入的值用Number（）方法修饰一下，完美解决。