element组件cascader动态设置选择值

本篇博客包括三个部分：开发时遇到的问题描述，问题的解决方法，解决问题的心路历程。

问题描述：

动态设置cascader的取值，发现输入框正确了，但是展开的弹层样式选中有问题

见图解释，数据来源于官网：

下图是页面初始化时的默认值

现在项目场景是需要在js里动态改变cascader的选择值，比如，让级联选择器选中组件》Data》Tag标签：

<el-form-item label="选择" prop="treeVal">
	<el-cascader 
		ref="cascaderTree"
		v-model="form.treeVal"
		:options="cascaderList">
	</el-cascader>
</el-form-item>

self.form.treeVal = ['zujian', 'data', 'tag'];

按理说，这样子设置了应该就没问题了，刷新页面，触发设置事件后，发现，输入框正确了，但是弹层的选中样式不太对，见下图这样

解决方法：

这个问题，我的解决方法是给级联选择器加一个v-if的变量控制显示隐藏。

见下方代码解释

<!-- 多了一个v-if，这个变量很关键哦 -->
<el-form-item label="选择" prop="treeVal" v-if="form.isCascaderShow">
	<el-cascader 
		ref="cascaderTree"
		v-model="form.treeVal"
		:options="cascaderList">
	</el-cascader>
</el-form-item>

self.form.isCascaderShow = false;
self.form.treeVal = ['zujian', 'data', 'tag'];
//nextTick也很重要，不然效果还是不对的哦
self.$nextTick( () => {
	self.form.isCascaderShow = true;
})

然后就没问题了，见下图

最后，来个总结···心路历程

这个方法虽笨，但是也是我在控制台研究了一天的级联选择器对象发现徒劳偶然想到的

什么是级联选择器对象呢，就是下图，研究各个变量，方法调用组合，发现都得不到上图正确的效果，这其中多少辛酸泪（源码里面找cascader初始化的方法，能力有限没找到；调用组件提供的每个方法，时间去了，但是好像都不管用；想想是不是我的elementui版本太低了，毕竟这是vue3  add的element，我看了看package.json，elementui版本是低，只有^2.4.5，不过我也只是想想；等等等等.......）就不说了，一图来概括。要说研究这个对象学到什么吧，好像也没学到什么，要说没学到什么吧，好像也学到了什么，总之，一天应该不亏吧。。。。。

终于，努力没白费，偶然的机会，我突然之间顿悟，页面初始化时，设置级联选择器默认值，值和弹层的样式都是可以的呀。所以嘞，我就建了个变量，控制级联选择器的显示隐藏，每次设置值的时候，就让它初始化一次。果然，有效果了，哈哈哈。虽然是笨方法，但是我觉得这其中的原理还是很深奥的。