大家好，这里是刚刚过试用期的前端小菜鸟，文章中有什么不正确的地方，欢迎各位大佬斧正。
首先的话介绍一下需求的背景，本人目前的话是为联通开发一个门户管理系统，因为他们的组织机构和岗位的树太过庞大，所以不能一次就全部加载出来，只能通过懒加载的形式。
刚开始的时候我以为这个需求就像单个懒加载那么的简单，于是cv了之前的单选懒加载代码，但是上手之后发现坑是挺多的
第一个坑，级联选择器的懒加载触发时机是在钩子函数中，也就是说页面刚加载未回显数据时，懒加载这步操作就已经被执行了，当你拿到数据之后他不会进行回显，需要你去手动的给他if刷新一次
第二个坑，级联选择器多选的情况，他的数据格式是一个二维数组，而级联的懒加载很明显没有考虑这个情况，当一维数组，他会自动的进行懒加载操作，直到你的最后一级。而二维数组时没有进行操作。这个时候我开始写下了第一行自己的代码
<template slot-scope="{ node, data }">
<span> {{data.agencyName}}</span>
</template >
随后的思路是从后端拿到所有的一级目录，二级目录，以此类推进行一个巨大的promise.all 当然这个方法和思路很明显是不对的，最重要的是，级联不像树形，没有办法通过key拿到node节点，也没有展开的方法，感谢饿了么，不然这个地方就要重写了
接下来的考虑是通过给span加上ref，遍历后端给的二维数组，通过比对给ref一个点击，不过由于ref可能是异步加载出来的，ajax请求也是异步，不确定性太多，对于代码的维护也不利。于是将template包裹一个vue组件
<template slot-scope="{ node, data }">
<nodeItem
:node="node"
:data="data"
:cache="cacheCurrentNode"
/>
</template>
//这个地方是组件内部的挂载完毕钩子函数
if (this.data.agency_type === 1) {
// 机构的情况下
if (this.cache[this.node.value]) {
this.$refs.click.click()
// 自动触发懒加载事件
}
} else {
// 已经是叶子节点了
if (this.cache[this.node.value]) {
this.node.checked = true
// 自动设置checked状态
this.$nextTick(() => {
this.$refs.click.click()
// 自动点击触发视图更新
})
}
}
这种解决方式最大的优势在于懒加载和点击事件的顺序不需要考虑了，当然会有一些小问题（我不承认是缺点），比如回显的时候级联的页面会展开，级联的层级高，回显速度会很慢（这边最高有十层）。如果各位有什么好的方式，欢迎各位评论指点
