el-cascader如何修改限制选中数量
Demo预览：
https://sunzsh.github.io/vue-demos/#/cascader
代码 / 文件：
https://github.com/sunzsh/vue-el-demo/blob/master/src/views/cascader.vue
大家看啊
这种组件有时候还是挺有用的
只不过呢
最近啊有个小伙伴说想给他加一个
数量限制的功能
因为他默认是不支持这个功能的
那怎么改呢
我们来看一下啊
首先呢如果我们要想加数量限制
就不能在这用v-model双向绑定了
我们需要自己来管理它的value
所以呢先绑定一个value
然后用change来手动判断
是不是符合设置的条件
所以呢我们先在这加一个value.length
比如说大于2的话哈
然后呢我们加一个弹框
this.$message，最多只能选两个
然后呢我们就不赋值了
否则的话呢我们再给value赋值
对吧！理想是这样的，（但）我们来试一下
一个、两个
第三个大家看弹出来了
然后这块的值也是2个
但是组件里边显示不对
一个是文本框里是3个标签
然后复选框这还是3个
所以这怎么办呢
我们先来看这个组件里边代码哈
他赋进来的这个value啊
并没有直接绑定到他这个
最主要的这个组件上
大家看这个
这个panel
其实就是他展开的这个组件（选择面板）
大家看它绑定的是哪个值呢
是checkedValue
那checkedValue是怎么来的呢
它就是默认等于我们传进来的这个value
我们都知道在封装
这个vue的组件的时候啊
传进来的这个Props的属性
是不能直接修改的
你改它就报警告
所以呢
它是把这个value付给了这个checkedValue
从此以后在组件的内部
它是直接用这个属性的
所以呢我们还需要在这
不行的时候再给他把这个值设置回来
我前面呢已经绑定了refs了
所以呢我们在这this.$refs.cascader
然后呢把这个属性等于
this.value就行了
就是他们最后一次有效的值
然后啊注意！还没完
如果我们看源码的话
你会发现它有一个这个watch
watch这个checkedValue变化的时候
它会调一个这个方法
什么意思呢我们来看一下这里边
通过这个
字面意思来理解就是他其实在
处理这个上面选中的这个标签
所以呢我们也得调一下这个方法
this.$refs.cascader... 这个方法
然后呢注意这两个代码一定要放在
next tick里面
因为在组件内部调用这个
change事件之后还有一些其他代码
点nextTick
好
然后呢我们把这两行代码拿进来
好我们来试一下啊
刷新
1个、2个
3个，大家看选不中了上面这也没问题
我把清空再来一遍
比如直接选择根目录这个
大家看1个也选不上
那我们再来试一下不调用这行代码
我们再来看一下
1个、2个、3个大家看这没选中
但是文本框的这个已经多出来了
大家看
所以呢
这也就验证了我们这个方法是管
这个文本框里边这个tag标签的
最后更新于