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