el-cascade限制选中数量（续）
Demo预览：
https://sunzsh.github.io/vue-demos/#/cascader2
代码 / 文件：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/cascader2.vue
上期视频发布以后
有个小伙伴发现一点问题
就是比如说我在这个层级下
选中了2个
并且呢我现在最多限制只能选2个
在我去其他层级的时候，大家看
我再勾选
虽然提示了不能选
然后这个选中也都没有问题
但是呢
这个面板又回到了原来这个层级上
（我们希望他还是在这个层级里边）
那为什么会这样呢
我们来看一下上一期的代码
我们会改变checkedValue
这个checkedValue 上一期也说了
他会传给这个组件
也就是说展开的这个面板
是一个单独封装的组件
那我们都知道
v-model其实就是value的双向绑定
所以
checkedValue就会传给这个组件的value属性
所以呢我们来看这个组件
找到这个props
大家看 这有一个value属性
然后我们再搜这个value
你会发现它还有一个watch
也就是说当value发生变化的时候
它会改变复选框的这个选中状态
我们来看一下
然后这里边你再一层一层的看
你会发现啊
它这里边会改变展开的状态
比如说我们展开这个方法
这里边就有expand nose才会去做展开
那具体代码的细节我们就不读了哈
我们就知道这个方法给他一个数组
他就可以一层一层的展开
那数组是什么呢
就是我们每一层
对应被展开的那个节点
所以如果我们要想展开这一层
我们其实需要"东南"和"江苏"（两个节点）就够了
所以呢我就想到
我们可不可以直接调这个方法
那调这个方法没问题
问题是我们怎么去构建这个node节点的数组
所以这里边还有一个关键的方法
就是这个getNodeByValue
这个方法可以根据一个value
去找到对应的node节点，注意它只是找到一个节点
我们可以试一下
我们先在这啊
找到它最后一次点击的那个值
注意
一定要在这个checkedValue被赋值之前
否则它就被覆盖了
所以呢我们在这找到value的最后一个
.length - 1 作为一个索引
因为value是一个数组
我们声明一个变量叫last
等于value里面的最后一个
然后啊我们就要想办法调用它
这个getNodeByValue
调用这个方法就要先找到这个
展开的面板组件
好在他这也写了一个ref
所以呢我们需要在这加一个
找到这个组件之后
再去点refs.panel
然后呢我们再去调这个方法
getNoteByValue
然后把这个value last传进来
我们先把它打印一下大家看一下
好，刷新一下
大家注意啊
我现在这选两个
然后换一节点选一个
大家看这个node出来了
我们展开这个node
这有一个label
大家看这个label就是我刚才点的这个
无锡
就是这个
好在呢它还有一个parent
大家看parent就是它外部这一层
我们看它的label
就是江苏
所以呢我们一层一层的
其实可以构建出一个数组的
所以这就简单了
我们呀
可以这样先把它放到一个数组里面
const nodes =
把这个拿过来
这个就是他最后一个node
然后呢我们做一个while循环 nodes
第一个的parent
是不是有值
如果有值呢
我们让node.unshift 大家看
unshift就是在第一个元素（第0个索引）上添加
添加它的parent
这样的话呢最终构建一个nodes
我们再把它打印一下
好刷新
现在这选两个
然后选浙江
点嘉兴打开
出来3个
其实啊我们要2个就够了
第一个是东南就是这个
然后以此类推第二个是江苏（口误：浙江）
第三个是无锡（口误：嘉兴）
其实第三个有没有都行
但是我们就放这了
然后最后简单了
我们就去调一下它这个expendNode方法
还是我们去找到panel的组件
然后在这
调用他的expendNodes
然后把一个nodes传进来
但是注意
这个还是要在nextTick里边执行
否则它还会乱
nextTick
我们先这样写把它替换下
把这个用了
好我们再来试一下
展开
选中两个然后换一个西北、新疆 大家看
没有问题了
再去东南江苏
这样都可以了
最后更新于