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中手動封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動封裝iconfont組件(三種引用方式的封裝和使用),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09

