详解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 相关文章推荐
Javascript读取cookie函数代码
Oct 16 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
js验证上传图片的方法
May 12 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
php返回json数据函数实例
2014/10/09 PHP
dedecms中使用php语句指南
2014/11/13 PHP
php上传文件问题汇总
2015/01/30 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
python直接访问私有属性的简单方法
2016/07/25 Python
使用Python写一个小游戏
2018/04/02 Python
详解Django CAS 解决方案
2019/10/30 Python
pytorch forward两个参数实例
2020/01/17 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
大学毕业生工作的自我评价
2013/10/01 职场文书
个人工作表现自我评价
2015/03/06 职场文书
新生开学寄语大全
2015/05/28 职场文书
sql注入教程之类型以及提交注入
2021/08/02 MySQL
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
java版 联机五子棋游戏
2022/05/04 Java/Android