詳解iview的checkbox多選框全選時校驗問題

更新時間：2019年06月10日 15:00:25 作者：哈哈哈

這篇文章主要介紹了詳解iview的checkbox多選框全選時校驗問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在用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>

上述代碼標(biāo)粗部分所用到的是click方法

但是在做表單校驗的時候會出現(xiàn)一個問題，就是當(dāng)你選擇香蕉，蘋果，西瓜時會觸發(fā)v-model = 'checkAllGroup' 綁定的校驗方法，但是全選/不全選的時候，這個校驗不會觸發(fā)。

解決方法：把全選的 @click.prevent.native="handleCheckAll" 方法改成 @on-change="handleCheckAll"

這個問題就會得到解決。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue動態(tài)綁定class的幾種常用方式小結(jié)
這篇文章主要介紹了vue動態(tài)綁定class的幾種常用方式,結(jié)合實例形式總結(jié)分析了vue.js常見的對象方法、數(shù)組方法進(jìn)行class動態(tài)綁定相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
vue3 emit is not a function問題及解決
這篇文章主要介紹了vue3 emit is not a function問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-09-09
vue3中路由寫法與傳參方式的超詳細(xì)指南
Vue?Router是Vue.js官方的路由管理器,它主要用于單頁面應(yīng)用程序中,幫助解決頁面導(dǎo)航、組件復(fù)用等問題,下面我們就來看看vue3中路由寫法與傳參方式吧
2024-11-11
Vue3中配置404路由及懶加載的解決過程
這篇文章主要介紹了Vue3中配置404路由及懶加載的解決過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2025-04-04
Vue彈窗組件的實現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Vue彈窗組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
詳解如何在vue項目中引入elementUI組件
這篇文章主要介紹了詳解如何在vue項目中引入elementUI組件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-02-02
vue3中el-table實現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中el-table實現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價值,需要的朋友可以參考下
2024-02-02
vue.js父組件使用外部對象的方法示例
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因為思維定式，我們會犯一些奇怪的錯誤，有時候看似簡單的問題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對象的方法，這個看似簡單卻繞了一些彎路的問題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來看看吧。
2017-04-04
在Vue3中使用provide和inject進(jìn)行依賴注入的代碼詳解
在現(xiàn)代前端開發(fā)中,Vue.js已經(jīng)成為了非常流行的框架之一,它提供了極大的靈活性和可維護(hù)性,今天我們要探討的是Vue?3中的provide和inject功能,這是一種用于在組件樹中進(jìn)行依賴注入的方法,需要的朋友可以參考下
2024-06-06
Vue-Router實現(xiàn)頁面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實現(xiàn)頁面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。
2017-02-02