详解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 相关文章推荐
js传值 判断
Oct 26 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
js生成随机数的方法实例
Oct 16 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
Move.js入门
Feb 08 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JS array数组检测方式解析
May 19 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
再次研究下cache_lite
2007/02/14 PHP
php 数学运算验证码实现代码
2009/10/11 PHP
php radio 单选框获取与保持值的实现代码
2010/05/15 PHP
ThinkPHP分页实例
2014/10/15 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
JavaScript创建对象方法实例小结
2018/09/03 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[46:43]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第二局
2016/03/02 DOTA
Pyramid添加Middleware的方法实例
2013/11/27 Python
用Python实现协同过滤的教程
2015/04/08 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
出国考察邀请函
2014/01/21 职场文书
计算机专业职业规划
2014/02/28 职场文书
房屋转让协议书范本
2014/04/11 职场文书
2015年材料员工作总结
2015/04/30 职场文书
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android