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

遇到了許多問題
如:點擊tab切換后 全選按鈕要點擊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,//全選判斷標識
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é)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue v-for 遍歷循環(huán)時key值報錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時key值報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
安裝@vue/cli 報錯npm WARN deprecated request
這篇文章主要介紹了安裝@vue/cli 報錯npm WARN deprecated request@2.88.2問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題,但真正放在服務(wù)器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤的解決方案,需要的朋友可以參考下2024-01-01
改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解)
下面小編就為大家分享一篇改變vue請求過來的數(shù)據(jù)中的某一項值的方法(詳解),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue2中如何更改el-dialog出場動畫(el-dialog彈窗組件)
el-dialog是一個十分好用的彈窗組件,但是出場動畫比較單調(diào),于是決定自定義一個出場動畫,本文通過實例代碼圖文相結(jié)合給大家敘述下實現(xiàn)思路,感興趣的朋友一起看看吧2022-06-06

