推荐设备MORE

深说免费建站的猫腻

深说免费建站的猫腻

行业知识

杭州微信小程序_详解iview的checkbox多选框全选时校

日期:2021-01-08
我要分享
详解iview的checkbox多选框全选时校验问题       这篇文章主要介绍了详解iview的checkbox多选框全选时校验问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在iview给的例子中 代码如下

 template 
 div 
 Checkbox
 :indeterminate="indeterminate"
 :value="checkAll"
 **@click.prevent.native="handleCheckAll"** 全选 /Checkbox 
 /div 
 CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange" 
 Checkbox label="香蕉" /Checkbox 
 Checkbox label="苹果" /Checkbox 
 Checkbox label="西瓜" /Checkbox 
 /CheckboxGroup 
 /template 
 script 
 export default {
 data () {
 return {
 indeterminate: true,
 checkAll: false,
 checkAllGroup: ['香蕉', '西瓜']
 methods: {
 handleCheckAll () {
 if (this.indeterminate) {
 this.checkAll = false;
 } else {
 this.checkAll = !this.checkAll;
 this.indeterminate = false;
 if (this.checkAll) {
 this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
 } else {
 this.checkAllGroup = [];
 checkAllGroupChange (data) {
 if (data.length === 3) {
 this.indeterminate = false;
 this.checkAll = true;
 } else if (data.length 0) {
 this.indeterminate = true;
 this.checkAll = false;
 } else {
 this.indeterminate = false;
 this.checkAll = false;
 /script 

上述代码标粗部分所用到的是click方法

但是在做表单校验的时候会出现一个问题,就是当你选择香蕉,苹果,西瓜时会触发v-model = 'checkAllGroup' 绑定的校验方法,但是全选/不全选的时候,这个校验不会触发。

解决方法 : 把全选的 @click.prevent.native="handleCheckAll" 方法 改成 @on-change="handleCheckAll"

这个问题就会得到解决。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。