解決element-ui el-checkbox的一些坑
element-ui el-checkbox的一些坑
<el-checkbox @change="handleCheckedCitiesChange" ?v-model="checkAll" ? :label="list.eventtypeid" ?>全選</el-checkbox>
?<el-checkbox-group ? v-model="checkOne" class="checkGroup" >
? ? ? <el-checkbox ?v-for="(operate,index1) in list.operation" :label="operate.actionid" ? :key="operate.actionid" ?@change="handleCheckedCitiesChange">{{operate.actionname}}</el-checkbox>
?</el-checkbox-group>看上面的例子，都是把el-checkbox放在el-checkbox-group里面進行循環(huán)的。
1.只能寫@change事件而不能寫@click。而且你可以把這個事件加在el-checkbox-group上面。這樣每次點擊的checkbox框變化他都能捕捉到。也可以放在el-checkbox上面，這樣點擊時獲取的是你當時點擊的checkbox。
2.v-model上面的值是你checkebox的選中的值，這里label綁定的是id（也就是我們想要獲取給后臺的）而不是顯示的內容。而且必須寫個label賦值id，不然你寫name的話，他選擇時就把名字相同的都選中了。v-model寫在了checkbox-group上面。這樣獲取的就是循環(huán)的里面所有選中的，不是一條數(shù)組選中的。有了v-model就可以不用寫:checked屬性來決定他是否選中了。如果選中了。你就在v-model綁定的那個數(shù)組里添加上這個id值就可以啦，如果取消選中就在數(shù)組里刪除這個值。
刪除：比如this.actionid是我們想刪除的。
this.checkOne=this.checkOne.map(res=>{
? ? ? ? if(res!=this.actionid){return res;}
});添加：this.checkOne.push(this.actionid);
3.@change事件如何獲取他點擊是取消還是選中呢？這里element-ui 1.~版本和2.~版本寫法不一樣。
低版本獲取的是一個對象，你從對象里獲取到target.checked的boolean值。高版本直接是boolean值
1.~版本
handleCheckAllChange(event) {
? ? ? ? this.checkedCities = event.target.checked ? cityOptions : [];
? ? ? ? this.isIndeterminate = false;
? ? ? },2.0版本的是boolean值
handleCheckAllChange(val) {
? ? ? ? this.checkedCities = val ? cityOptions : [];
? ? ? ? this.isIndeterminate = false;
? ? ? }4.v-model="checkOne"綁定的checkOne是個數(shù)組。定義的時候如果不是數(shù)組可能會選擇一個其他所有的都被選中了
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ù)據
names: [], // 默認所有數(shù)據
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ù)據，全選和反選數(shù)據都能得到。
一開始認為是結構中key的渲染，但是試過后發(fā)現(xiàn) :key="index"還是:key="item.title"都不會影響回顯。
仔細閱讀官網發(fā)現(xiàn)this.checkedCities的數(shù)據結構不能那么復雜
所以我在handleCheckAllChangeSales方法中把過濾原來的this.detailsList 數(shù)，當全選時賦值給this.checkeds
this.checkeds打印出來這個值是這種結構
最終實現(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ù)據
names: [], // 默認所有數(shù)據
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>
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了VUE預渲染及遇到的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
由于開發(fā)需要,我需要在登錄成功請求成功后,調用父窗口的一個點擊事件方法,這篇文章主要給大家介紹了關于vue跨窗口通信之新窗口調用父窗口的相關資料,需要的朋友可以參考下2023-01-01
本篇文章主要介紹了詳解基于vue-cli優(yōu)化的webpack配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
Vue循環(huán)遍歷選項賦值到對應控件的實現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項賦值到對應控件的實現(xiàn)方法啊，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了Vue-Router使用prams路由傳參失效,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
vue3+ts數(shù)組去重方及reactive/ref響應式顯示流程分析
這篇文章主要介紹了vue3+ts數(shù)組去重方法-reactive/ref響應式顯示,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue3 的響應式和以前有什么區(qū)別，Proxy 無敵？
這篇文章主要介紹了Vue3 的響應式和以前有什么區(qū)別,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了vue-admin如何實現(xiàn)動態(tài)路由問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue路由警告:Duplicate named routes definition問題
這篇文章主要介紹了vue路由警告:Duplicate named routes definition問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼
我們在輸入銀行賬號會設置每四位添加一個空格，輸入金額，每三位添加一個空格。那么，在vue，element-ui 組件中，如何實現(xiàn)呢？下面小編給大家?guī)砹藇ue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼，感興趣的朋友一起看看吧2018-09-09