如何解決el-checkbox選中狀態(tài)更改問題
el-checkbox選中狀態(tài)更改問題
相信很多猿友都被el-checkbox選中狀態(tài)更改的問題困擾的掉了不少頭發(fā)?。。。。。?！這玩意真的是坑??！!今天，機(jī)緣巧合(認(rèn)真研究)之下，終于解決了這個問題。
問題分析
首先這個問題部分人給的解決方式修改v-model的綁定值，而且有部分人信誓旦旦的說這個方法有效。我測了一下，確實(shí)有效，但是是在沒有使用el-checkbox-group的情況下。具體代碼如下：
<template> ? <div> ? ? ? <el-checkbox label="1" v-model="checked1">checkbox1</el-checkbox> ? ? ? <el-checkbox label="2" v-model="checked2">checkbox2</el-checkbox> ? ? ? <el-checkbox label="3" v-model="checked3">checkbox3</el-checkbox> ? ? ? <el-button @click="dj">點(diǎn)擊切換</el-button> ? </div> </template>
<script>
export default {
? data () {
? ? return {
? ? ? checked1: true,
? ? ? checked2: false,
? ? ? checked3: true
? ? }
? },
? methods: {
? ? dj () {
? ? ? let that = this
? ? ? if (that.checked1 === true) {
? ? ? ? that.checked1 = false
? ? ? } else {
? ? ? ? that.checked1 = true
? ? ? }
? ? ? if (that.checked2 === true) {
? ? ? ? that.checked2 = false
? ? ? } else {
? ? ? ? that.checked2 = true
? ? ? }
? ? ? if (that.checked3 === true) {
? ? ? ? that.checked3 = false
? ? ? } else {
? ? ? ? that.checked3 = true
? ? ? }
? ? }
? }
}
</script>經(jīng)過測試，在不添加el-checkbox-group的情況下，修改v-model的綁定值確實(shí)能起到改變選中狀態(tài)的效果。但是一旦加上el-checkbox-group。此方法失效。
有的人說修改:checked的綁定值。經(jīng)測試，:checked只在賦初始值的時候有用，修改:checked的綁定值并不能起到修改選中狀態(tài)的效果?！緹o論有沒有el-checkbox-group包含都不可以】
測試的具體代碼如下，有興趣的可以復(fù)制到VUE項(xiàng)目中測試一下。
代碼說明：為了好記，三個復(fù)選框編號為1，2，3。
在不使用el-checkbox-group包含的情況下，v-model的值決定了復(fù)選框的選中狀態(tài)。而:checked的值只能決定初始選中狀態(tài)。
<template>
? <div>
? ? <!-- <el-checkbox-group v-model="group"> -->
? ? ? <el-checkbox label="1" v-model="model1" :checked="check1">checkbox1</el-checkbox>
? ? ? <el-checkbox label="2" v-model="model2" :checked="check2">checkbox2</el-checkbox>
? ? ? <el-checkbox label="3" v-model="model3" :checked="check3">checkbox3</el-checkbox>
? ? ? <br>
? ? <!-- </el-checkbox-group> -->
? ? ? <el-button @click="dj">點(diǎn)擊切換v-model值</el-button>
? ? ? <p>{{model1}}</p>
? ? ? <p>{{model2}}</p>
? ? ? <p>{{model3}}</p>
? ? ? <el-button @click="dj2">點(diǎn)擊切換checked值</el-button>
? ? ? <p>{{check1}}</p>
? ? ? <p>{{check2}}</p>
? ? ? <p>{{check3}}</p>
? </div>
</template><script>
export default {
? data () {
? ? return {
? ? ? group: [],
? ? ? model1: true,
? ? ? model2: false,
? ? ? model3: true,
? ? ? check1: false,
? ? ? check2: true,
? ? ? check3: false
? ? }
? },
? methods: {
? ? dj () {
? ? ? let that = this
? ? ? if (that.model1 === true) {
? ? ? ? that.model1 = false
? ? ? } else {
? ? ? ? that.model1 = true
? ? ? }
? ? ? if (that.model2 === true) {
? ? ? ? that.model2 = false
? ? ? } else {
? ? ? ? that.model2 = true
? ? ? }
? ? ? if (that.model3 === true) {
? ? ? ? that.model3 = false
? ? ? } else {
? ? ? ? that.model3 = true
? ? ? }
? ? },
? ? dj2 () {
? ? ? let that = this
? ? ? if (that.check1 === true) {
? ? ? ? that.check1 = false
? ? ? } else {
? ? ? ? that.check1 = true
? ? ? }
? ? ? if (that.check2 === true) {
? ? ? ? that.check2 = false
? ? ? } else {
? ? ? ? that.check2 = true
? ? ? }
? ? ? if (that.check3 === true) {
? ? ? ? that.check3 = false
? ? ? } else {
? ? ? ? that.check3 = true
? ? ? }
? ? }
? }
}
</script>解決方式
在含有el-checkbo-group包含的情況下，再通過操作單個復(fù)選框的v-model的綁定值已經(jīng)起不到效果了。
但相信使用el-checkbox-group的人都知道，如果不指定el-checkbox-group的v-model屬性，則el-checkbox-group作用域內(nèi)的所有el-checkbox都將不會顯示。
這似乎說明group的v-model值相當(dāng)重要。而且這個值是一個數(shù)組，而不是一個字符串。
這是不是意味著group作用域內(nèi)的每一個checkbox都被動態(tài)加載到這個group的數(shù)組中了呢？
于是我做了測試，發(fā)現(xiàn)果然如我們所想的那樣，group作用域內(nèi)的checkbox都被動態(tài)加載到這個數(shù)組中了，而動態(tài)加載checkbox的關(guān)鍵就在于給checkbox指定label屬性。
label屬性可以自定義。如果不指定checkbox的label屬性，則在數(shù)組中會顯示null。
如果出現(xiàn)多個不指定label屬性的checkbox，這些未指定label屬性的checkbox會被“同選同消”。
測試代碼放在文末，感興趣的同學(xué)可以復(fù)制到VUE項(xiàng)目中測試。
綜上：
- 在不加el-checkbox-group的情況下，指定并修改單個el-checkbox的v-model值就可以起到改變該復(fù)選框選中狀態(tài)的效果。
- 當(dāng)el-checkbox出現(xiàn)在el-checkbox-group的作用域內(nèi)時，則需要修改el-checkbox-group的v-model數(shù)組內(nèi)容，才能起到改變復(fù)選框選中狀態(tài)的效果。
PS:在group作用域中增加選中狀態(tài)比較簡單，只需要在group的v-model綁定的數(shù)組中追加一個需要選擇的checkbox的label值就可以。如：
this.checkGroup.push('2') 【但是要確該復(fù)選框label不會在數(shù)組中同一時刻出現(xiàn)多個】
但是在group作用域中取消選中狀態(tài)相對來說比較復(fù)雜，以下提供兩種方式用作參考：
1、數(shù)組遍歷方式
checkGroup.forEach(function(item, index, arr) {
? ? if(item === "3") {
? ? ? ? arr.splice(index, 1);
? ? }
})2、過濾器方式
checkGroup= checkGroup.filter(function(item) {
? ? return item != "3"
})<template>
<!-- 測試代碼 -->
? <div>
? ? <p>這里是checkGroup:{{checkGroup}}</p>
? ? <br>
? ? <el-checkbox-group v-model="checkGroup">
? ? ? <el-checkbox label="1">checkbox1</el-checkbox>
? ? ? <el-checkbox label="2">checkbox2</el-checkbox>
? ? ? <el-checkbox label="3">checkbox3</el-checkbox>
? ? ? <el-checkbox>checkbox4</el-checkbox>
? ? ? <el-checkbox>checkbox5</el-checkbox>
? ? </el-checkbox-group>
? ? <el-button @click="click1">點(diǎn)擊追加選中2號復(fù)選框</el-button>
? </div>
</template><script>
export default {
? data () {
? ? return {
? ? ? checkGroup: ['1', '3']
? ? }
? },
? methods: {
? ? click1 () {
? ? ? let that = this
? ? ? that.checkGroup.push('2')
? ? }
? }
}
</script>el-checkbox的基本使用,避坑指南
使用el-checkbox勾選出現(xiàn)的問題
全選不生效，全選后底下的勾選不能回顯
有問題的代碼
<template>
<div>
<el-checkbox
class="all_t"
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChangeSales"
>全選</el-checkbox
>
<el-checkbox-group
v-model="checkeds"
@change="handleCheckedColumnChangeSales"
>
<el-checkbox
v-for="(item,index) in detailsList"
:label="item.title"
:key="index"
>{{ item.title }}</el-checkbox
>
</el-checkbox-group>
</div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
checkAll: false,
checkeds: [], // 已選數(shù)據(jù)
names: [], // 默認(rèn)所有數(shù)據(jù)
isIndeterminate: false, // 全選框是否在勾選狀態(tài)
detailsList: [
{
"title": "銷量",
"values": [
"0",
"5"
]
},
{
"title": "銷售額",
"values": [
"8",
"1"
]
},
{
"title": "訂單量",
"values": [
"3",
"9"
]
},
{
"title": "退款量",
"values": [
"0",
"0"
]
}
]
}
},
created() {
this.names = this.detailsList
},
methods: {
handleCheckAllChangeSales(val) {
this.checkeds = val ? this.detailsList : [];
this.isIndeterminate = false;
},
handleCheckedColumnChangeSales(value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.names.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.names.length
}
}
};
</script>
勾選出現(xiàn)的問題
全選不生效，全選后底下的勾選不能回顯，排查問題中發(fā)現(xiàn)打印this.checkeds能得到數(shù)據(jù)，全選和反選數(shù)據(jù)都能得到。
一開始認(rèn)為是結(jié)構(gòu)中key的渲染，但是試過后發(fā)現(xiàn) :key="index"還是:key="item.title"都不會影響回顯。
仔細(xì)閱讀官網(wǎng)發(fā)現(xiàn)this.checkedCities的數(shù)據(jù)結(jié)構(gòu)不能那么復(fù)雜
所以我在handleCheckAllChangeSales方法中把過濾原來的this.detailsList 數(shù)，當(dāng)全選時賦值給this.checkeds
this.checkeds打印出來這個值是這種結(jié)構(gòu)
最終實(shí)現(xiàn)效果
所有代碼
<template>
<div>
<el-checkbox
class="all_t"
:indeterminate="isIndeterminate"
v-model="checkAll"
@change="handleCheckAllChangeSales"
>全選</el-checkbox
>
<el-checkbox-group
v-model="checkeds"
@change="handleCheckedColumnChangeSales"
>
<el-checkbox
v-for="(item) in detailsList"
:label="item.title"
:key="item.title"
>{{ item.title }}</el-checkbox
>
</el-checkbox-group>
</div>
</template>
<script>
export default {
name: 'demo',
data() {
return {
checkAll: false,
checkeds: [], // 已選數(shù)據(jù)
names: [], // 默認(rèn)所有數(shù)據(jù)
isIndeterminate: false, // 全選框是否在勾選狀態(tài)
detailsList: [
{
"title": "銷量",
"values": [
"0",
"5"
]
},
{
"title": "銷售額",
"values": [
"8",
"1"
]
},
{
"title": "訂單量",
"values": [
"3",
"9"
]
},
{
"title": "退款量",
"values": [
"0",
"0"
]
}
]
}
},
created() {
this.names = this.detailsList
},
methods: {
handleCheckAllChangeSales(val) {
var checkedsItem = val ? this.detailsList : []
if (checkedsItem.length > 0) {
checkedsItem.map(item => {
this.checkeds.push(item.title)
})
} else {
this.checkeds = []
}
this.isIndeterminate = false
},
handleCheckedColumnChangeSales(value) {
let checkedCount = value.length
this.checkAll = checkedCount === this.names.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.names.length
}
}
};
</script>
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了基于Vue.js的表格分頁組件使用方法，了解了Vue.js的特點(diǎn)，感興趣的朋友可以參考一下2016-05-05
這篇文章主要介紹了vue組件值變化但不刷新強(qiáng)制組件刷新的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
ElementUI中兩個Select選擇聯(lián)動效果實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于ElementUI中兩個Select選擇聯(lián)動效果實(shí)現(xiàn)的相關(guān)資料,在前端項(xiàng)目開發(fā)中,經(jīng)常會遇到省市縣三級聯(lián)動的下拉列表框組的問題,需要的朋友可以參考下2023-08-08
這篇文章介紹了在Linux服務(wù)器上部署vue項(xiàng)目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue懸浮可拖拽懸浮按鈕的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了vue axios同步請求解決方案,需要的朋友可以參考下2017-09-09
Element-UI結(jié)合遞歸組件實(shí)現(xiàn)后臺管理系統(tǒng)左側(cè)菜單
在Vue.js中使用遞歸組件可以方便地構(gòu)建多層級的菜單結(jié)構(gòu),遞歸組件適用于處理具有嵌套關(guān)系的數(shù)據(jù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
Vue中使用v-print打印出現(xiàn)空白頁問題及解決
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09