在用iview框架的 checkbox 多選框時(shí) 遇到了一個(gè)校驗(yàn)問(wèn)題
在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;
????????} elseif(data.length > 0) {
??????????this.indeterminate = true;
??????????this.checkAll = false;
????????} else{
??????????this.indeterminate = false;
??????????this.checkAll = false;
????????}
??????}
????}
??}
</script>
上述代碼標(biāo)粗部分所用到的是click方法
但是在做表單校驗(yàn)的時(shí)候會(huì)出現(xiàn)一個(gè)問(wèn)題哮翘，就是當(dāng)你選擇香蕉颈嚼，蘋果，西瓜時(shí)會(huì)觸發(fā)v-model = 'checkAllGroup' 綁定的校驗(yàn)方法饭寺，但是全選/不全選的時(shí)候阻课，這個(gè)校驗(yàn)不會(huì)觸發(fā)。
解決方法 ： 把全選的 @click.prevent.native="handleCheckAll" 方法 改成 @on-change="handleCheckAll"
這個(gè)問(wèn)題就會(huì)得到解決艰匙。
對(duì)web開發(fā)技術(shù)感興趣的同學(xué)限煞，歡迎私信小編加群，不管你是小白還是大牛我都?xì)g迎员凝，還有大牛整理的一套高效率學(xué)習(xí)路線和教程與您免費(fèi)分享署驻，同時(shí)每天更新視頻資料。
最后健霹，祝大家早日學(xué)有所成旺上，拿到滿意offer，快速升職加薪糖埋，走上人生巔峰
