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