如何解決el-checkbox選中狀態(tài)更改問(wèn)題
el-checkbox選中狀態(tài)更改問(wèn)題
相信很多猿友都被el-checkbox選中狀態(tài)更改的問(wèn)題困擾的掉了不少頭發(fā)！?。。。。?！這玩意真的是坑??！!今天，機(jī)緣巧合(認(rèn)真研究)之下，終于解決了這個(gè)問(wèn)題。
問(wèn)題分析
首先這個(gè)問(wèn)題部分人給的解決方式修改v-model的綁定值，而且有部分人信誓旦旦的說(shuō)這個(gè)方法有效。我測(cè)了一下，確實(shí)有效，但是是在沒(méi)有使用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)過(guò)測(cè)試，在不添加el-checkbox-group的情況下，修改v-model的綁定值確實(shí)能起到改變選中狀態(tài)的效果。但是一旦加上el-checkbox-group。此方法失效。
有的人說(shuō)修改:checked的綁定值。經(jīng)測(cè)試，:checked只在賦初始值的時(shí)候有用，修改:checked的綁定值并不能起到修改選中狀態(tài)的效果?！緹o(wú)論有沒(méi)有el-checkbox-group包含都不可以】
測(cè)試的具體代碼如下，有興趣的可以復(fù)制到VUE項(xiàng)目中測(cè)試一下。
代碼說(shuō)明：為了好記，三個(gè)復(fù)選框編號(hào)為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包含的情況下，再通過(guò)操作單個(gè)復(fù)選框的v-model的綁定值已經(jīng)起不到效果了。
但相信使用el-checkbox-group的人都知道，如果不指定el-checkbox-group的v-model屬性，則el-checkbox-group作用域內(nèi)的所有el-checkbox都將不會(huì)顯示。
這似乎說(shuō)明group的v-model值相當(dāng)重要。而且這個(gè)值是一個(gè)數(shù)組，而不是一個(gè)字符串。
這是不是意味著group作用域內(nèi)的每一個(gè)checkbox都被動(dòng)態(tài)加載到這個(gè)group的數(shù)組中了呢？
于是我做了測(cè)試，發(fā)現(xiàn)果然如我們所想的那樣，group作用域內(nèi)的checkbox都被動(dòng)態(tài)加載到這個(gè)數(shù)組中了，而動(dòng)態(tài)加載checkbox的關(guān)鍵就在于給checkbox指定label屬性。
label屬性可以自定義。如果不指定checkbox的label屬性，則在數(shù)組中會(huì)顯示null。
如果出現(xiàn)多個(gè)不指定label屬性的checkbox，這些未指定label屬性的checkbox會(huì)被“同選同消”。
測(cè)試代碼放在文末，感興趣的同學(xué)可以復(fù)制到VUE項(xiàng)目中測(cè)試。
綜上：
- 在不加el-checkbox-group的情況下，指定并修改單個(gè)el-checkbox的v-model值就可以起到改變?cè)搹?fù)選框選中狀態(tài)的效果。
- 當(dāng)el-checkbox出現(xiàn)在el-checkbox-group的作用域內(nèi)時(shí)，則需要修改el-checkbox-group的v-model數(shù)組內(nèi)容，才能起到改變復(fù)選框選中狀態(tài)的效果。
PS:在group作用域中增加選中狀態(tài)比較簡(jiǎn)單，只需要在group的v-model綁定的數(shù)組中追加一個(gè)需要選擇的checkbox的label值就可以。如：
this.checkGroup.push('2') 【但是要確該復(fù)選框label不會(huì)在數(shù)組中同一時(shí)刻出現(xiàn)多個(gè)】
但是在group作用域中取消選中狀態(tài)相對(duì)來(lái)說(shuō)比較復(fù)雜，以下提供兩種方式用作參考：
1、數(shù)組遍歷方式
checkGroup.forEach(function(item, index, arr) {
? ? if(item === "3") {
? ? ? ? arr.splice(index, 1);
? ? }
})2、過(guò)濾器方式
checkGroup= checkGroup.filter(function(item) {
? ? return item != "3"
})<template>
<!-- 測(cè)試代碼 -->
? <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號(hào)復(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)的問(wèn)題
全選不生效，全選后底下的勾選不能回顯
有問(wè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": "銷(xiāo)量",
"values": [
"0",
"5"
]
},
{
"title": "銷(xiāo)售額",
"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)的問(wèn)題
全選不生效，全選后底下的勾選不能回顯，排查問(wèn)題中發(fā)現(xiàn)打印this.checkeds能得到數(shù)據(jù)，全選和反選數(shù)據(jù)都能得到。
一開(kāi)始認(rèn)為是結(jié)構(gòu)中key的渲染，但是試過(guò)后發(fā)現(xiàn) :key="index"還是:key="item.title"都不會(huì)影響回顯。
仔細(xì)閱讀官網(wǎng)發(fā)現(xiàn)this.checkedCities的數(shù)據(jù)結(jié)構(gòu)不能那么復(fù)雜
所以我在handleCheckAllChangeSales方法中把過(guò)濾原來(lái)的this.detailsList 數(shù)，當(dāng)全選時(shí)賦值給this.checkeds
this.checkeds打印出來(lái)這個(gè)值是這種結(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": "銷(xiāo)量",
"values": [
"0",
"5"
]
},
{
"title": "銷(xiāo)售額",
"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>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue PC端實(shí)現(xiàn)掃碼登錄功能示例代碼
目前大多數(shù)PC端應(yīng)用都有配套的移動(dòng)端APP，如微信，淘寶等，通過(guò)使用手機(jī)APP上的掃一掃功能去掃頁(yè)面二維碼圖片進(jìn)行登錄，使得用戶登錄操作更方便，安全，快捷，這篇文章主要介紹了Vue PC端如何實(shí)現(xiàn)掃碼登錄功能,需要的朋友可以參考下2023-01-01
vue3 中的 hooks 就是函數(shù)的一種寫(xiě)法，就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來(lái)，放到單獨(dú)的js文件中，或者說(shuō)是一些可以復(fù)用的公共方法/功能，這篇文章主要介紹了vue3中hooks的簡(jiǎn)介及用法,需要的朋友可以參考下2023-01-01
vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法
這篇文章主要介紹了vue打包的時(shí)候自動(dòng)將px轉(zhuǎn)成rem的操作方法,需要的朋友可以參考下2018-06-06
vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問(wèn)題
這篇文章主要介紹了vue解決this.$refs.xx在mounted中獲取DOM元素為undefined問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue?input組件如何設(shè)置失焦與聚焦，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue利用插件實(shí)現(xiàn)按比例切割圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3 嵌套路由的使用和 Vue2 相差不大,主要的區(qū)別是 Vue3 的路由實(shí)例化使用了 createApp() 方法,所以實(shí)例化路由時(shí)需要傳入根組件,這篇文章主要介紹了vue3使用vue-router嵌套路由(多級(jí)路由),需要的朋友可以參考下2023-12-12
基于Vue el-autocomplete 實(shí)現(xiàn)類(lèi)似百度搜索框功能
本文通過(guò)代碼給大家介紹了Vue el-autocomplete 實(shí)現(xiàn)類(lèi)似百度搜索框功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問(wèn)題
這篇文章主要介紹了解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能(詳細(xì)代碼)
這篇文章主要介紹了Vue3 + MybatisPlus實(shí)現(xiàn)批量刪除功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03