vue el-checkbox實(shí)現(xiàn)全選單選方式
更新時(shí)間:2024年03月08日 08:29:42 作者:泡芙is
這篇文章主要介紹了vue el-checkbox實(shí)現(xiàn)全選單選方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue el-checkbox全選單選
要求的頁面結(jié)構(gòu)
是這樣的

遇到了許多問題
如:點(diǎn)擊tab切換后 全選按鈕要點(diǎn)擊2次可以生效。。。
我這里就不一 一多說了。直接上代碼。
<el-row class="list-header">
<el-col :span="6"><el-checkbox class="checkbox" :checked="isCheckedAll" v-model="checkAllFlag" @change="checkAll"> 全選</el-checkbox></el-col>
</el-row>
<el-row class="list-header">
<el-checkbox-group v-model="checkArr" @change="handleChecked">
<el-checkbox class="checkbox" :label="data.productId"> </el-checkbox> {{data.productNum}}<span class="col-b"> {{data.specification}}</span>
</el-checkbox-group>
</el-row>
export default {
data() {
return {
dataList: [],
checkArr: [],//選中數(shù)組
isCheckedAll: false,//全選判斷標(biāo)識(shí)
checkAllFlag: false,
CheckedAllArr: [],//全選數(shù)組
}
},
methods: {
//全選
checkAll(event){
this.checkArr = event.target.checked ? this.CheckedAllArr : [];
},
//單選
handleChecked(){
this.isCheckedAll = this.checkArr.length == this.dataList.length;
this.checkAllFlag = this.checkArr.length == this.dataList.length;
},
switchStatus(type){
this.isCheckedAll = this.checkArr.length == this.dataList.length;
this.checkAllFlag = this.checkArr.length == this.dataList.length;
this.checkArr = [];
this.queryStatus = type;
this.getList();
},
//獲取商品列表 type==query 模糊搜索 為空:所有商品
getList() {
this.$http.post("/######",{
queryCategory: this.queryCategory,
queryKey:this.queryKey,
queryStatus:this.queryStatus
},{}).then(function(res){
this.dataList=res.body.dataList;
//全選后的數(shù)組
this.setCheckedAllArr()
}).catch();
},
setCheckedAllArr(){
let arr = [];
this.dataList.forEach((item,index)=>{
this.CheckedAllArr.push(item.productId);
})
}
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開發(fā)中用el-upload能滿足大部分場(chǎng)景,但是對(duì)于一些大文件的上傳時(shí)會(huì)比較慢,所以自己基于el-upload封裝了一個(gè)切片上傳組件,希望對(duì)大家有所幫助2023-03-03
使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法
本篇文章主要介紹了使用Vue完成一個(gè)簡(jiǎn)單的todolist的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
vue項(xiàng)目中定時(shí)器無法清除的原因解決
頁面有定時(shí)器,并且定時(shí)器在離開頁面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端
在開發(fā)中我們常常會(huì)遇到需要讓滾動(dòng)條保持到最底端的需求,比如在開發(fā)一個(gè)聊天框時(shí),請(qǐng)求接口拿到消息列表數(shù)據(jù),展示到前端頁面時(shí),需要讓滾動(dòng)條自動(dòng)滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動(dòng)條自動(dòng)保持到最底端,需要的朋友可以參考下2024-08-08

