详解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 Onunload与Onbeforeunload使用小结
Dec 31 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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防盗链的常用方法小结
2010/07/02 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
用sleep间隔进行python反爬虫的实例讲解
2020/11/30 Python
12岁生日感言
2014/01/21 职场文书
狼和鹿教学反思
2014/02/05 职场文书
公司周年庆典标语
2014/10/07 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
2014年党小组工作总结
2014/12/20 职场文书
开幕式邀请函
2015/01/31 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python