這篇文章主要介紹了詳解iview的checkbox多選框全選時校驗問題,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
在用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"
這個問題就會得到解決。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。