詳解iview的checkbox多選框全選時(shí)校驗(yàn)問(wèn)題
更新時(shí)間：2019年06月10日 15:00:25 作者：哈哈哈
這篇文章主要介紹了詳解iview的checkbox多選框全選時(shí)校驗(yàn)問(wèn)題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在用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;
} else if (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ì)得到解決。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue動(dòng)態(tài)綁定class的幾種常用方式小結(jié)
這篇文章主要介紹了vue動(dòng)態(tài)綁定class的幾種常用方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js常見的對(duì)象方法、數(shù)組方法進(jìn)行class動(dòng)態(tài)綁定相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
vue3 emit is not a function問(wèn)題及解決
這篇文章主要介紹了vue3 emit is not a function問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
Vue?Router是Vue.js官方的路由管理器,它主要用于單頁(yè)面應(yīng)用程序中,幫助解決頁(yè)面導(dǎo)航、組件復(fù)用等問(wèn)題,下面我們就來(lái)看看vue3中路由寫法與傳參方式吧2024-11-11
這篇文章主要介紹了Vue3中配置404路由及懶加載的解決過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要為大家詳細(xì)介紹了Vue彈窗組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
詳解如何在vue項(xiàng)目中引入elementUI組件
這篇文章主要介紹了詳解如何在vue項(xiàng)目中引入elementUI組件,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列代碼示例
這篇文章主要給大家介紹了關(guān)于vue3中el-table實(shí)現(xiàn)多表頭并表格合并行或列的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-02-02
在我們?nèi)粘ｉ_發(fā)中經(jīng)常因?yàn)樗季S定式，我們會(huì)犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡(jiǎn)單的問(wèn)題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法，這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問(wèn)題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來(lái)看看吧。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實(shí)現(xiàn)頁(yè)面正在加載特效方法示例
這篇文章主要給大家介紹了利用Vue-Router實(shí)現(xiàn)頁(yè)面正在加載特效方法示例，文中給出了詳細(xì)的示例代碼，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來(lái)一起看看吧。2017-02-02