vue el-checkbox實(shí)現(xiàn)全選單選方式
更新時(shí)間:2024年03月08日 08:29:42 作者:泡芙is
這篇文章主要介紹了vue el-checkbox實(shí)現(xiàn)全選單選方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(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)識 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中手動封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動封裝iconfont組件(三種引用方式的封裝和使用),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件
平時(shí)業(yè)務(wù)開發(fā)中用el-upload能滿足大部分場景,但是對于一些大文件的上傳時(shí)會比較慢,所以自己基于el-upload封裝了一個(gè)切片上傳組件,希望對大家有所幫助2023-03-03vue項(xiàng)目中定時(shí)器無法清除的原因解決
頁面有定時(shí)器,并且定時(shí)器在離開頁面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02