el-cascade限制选中数量(续)
上期视频发布以后
有个小伙伴发现一点问题
就是比如说我在这个层级下
选中了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
调用这个方法就要先找到这个