详解iview的checkbox多选框全选时校验问题


Posted in Javascript onJune 10, 2019

在用iview框架的 checkbox 多选框时 遇到了一个校验问题

在iview给的例子中 代码如下 https://www.iviewui.com/components/checkbox

<template>
  <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
    <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"

这个问题就会得到解决。

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

Javascript 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
前端路由&amp;webpack基础配置详解
Jun 10 #Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 #Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 #Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
Jun 10 #Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 #Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 #jQuery
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 #Javascript
You might like
php基于SQLite实现的分页功能示例
2017/06/21 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
javascript中 try catch用法
2015/08/16 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
使用Python对Csv文件操作实例代码
2017/05/12 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python使用udp实现聊天器功能
2018/12/10 Python
详解python中sort排序使用
2019/03/23 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
学年自我鉴定范文
2013/10/01 职场文书
电子邮箱格式怎么写
2014/01/12 职场文书
《将心比心》教学反思
2014/04/08 职场文书
家长对学生的评语
2014/04/18 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
工程催款通知书
2015/04/17 职场文书
女儿满月酒致辞
2015/07/29 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL
Nginx 常用配置
2022/05/15 Servers