解決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ù)據(jù)
names: [], // 默認所有數(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ù)都能得到。
一開始認為是結構中key的渲染，但是試過后發(fā)現(xiàn) :key="index"還是:key="item.title"都不會影響回顯。
仔細閱讀官網(wǎng)發(fā)現(xiàn)this.checkedCities的數(shù)據(jù)結構不能那么復雜
所以我在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ù)據(jù)
names: [], // 默認所有數(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了ESLint 是如何檢查 .vue 文件的，幫助大家更好的理解和使用ESLINT，感興趣的朋友可以了解下2020-11-11
Vue輸入框狀態(tài)切換&自動獲取輸入框焦點的實現(xiàn)方法
這篇文章主要介紹了Vue輸入框狀態(tài)切換&自動獲取輸入框焦點的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-05-05
這篇文章主要為大家介紹了深入Vue3中的Mock數(shù)據(jù)模擬實現(xiàn)細節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項目時,需要引入一個第三方的js文件,在index.html中通過以下方式引入JS文件編譯后就報了這個問題,這篇文章主要給大家介紹了關于Vue項目報錯:Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Nuxt的路由配置和參數(shù)傳遞方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue項目安裝scss常見報錯處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天遇到一個復制粘貼的需求,研究之后發(fā)現(xiàn)太簡單了,這篇文章主要給大家介紹了關于vue中js實現(xiàn)點擊復制文本到剪貼板的3種方案,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue導入新工程?“node_modules依賴”問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器,其實Pinia就是Vuex5,只不過為了尊重原作者的貢獻就沿用了名字Pinia,下面這篇文章主要給大家介紹了關于Vue.js狀態(tài)管理之Pinia與Vuex的相關資料,需要的朋友可以參考下2023-02-02
Vue Router 實現(xiàn)動態(tài)路由和常見問題及解決方法
動態(tài)路由不同于常見的靜態(tài)路由，可以根據(jù)不同的「因素」而改變站點路由列表。這篇文章主要介紹了Vue Router 實現(xiàn)動態(tài)路由和常見問題解決方案,需要的朋友可以參考下2020-03-03