" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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">&nbsp;</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組件解析(三種引用方式的封裝和使用)

    這篇文章主要介紹了vue中手動封裝iconfont組件(三種引用方式的封裝和使用),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件

    Vue實(shí)現(xiàn)封裝一個(gè)切片上傳組件

    平時(shí)業(yè)務(wù)開發(fā)中用el-upload能滿足大部分場景,但是對于一些大文件的上傳時(shí)會比較慢,所以自己基于el-upload封裝了一個(gè)切片上傳組件,希望對大家有所幫助
    2023-03-03
  • 使用Vue完成一個(gè)簡單的todolist的方法

    使用Vue完成一個(gè)簡單的todolist的方法

    本篇文章主要介紹了使用Vue完成一個(gè)簡單的todolist的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • Vue密碼登陸加密RSA實(shí)現(xiàn)方案

    Vue密碼登陸加密RSA實(shí)現(xiàn)方案

    這篇文章主要介紹了Vue密碼登陸加密RSA實(shí)現(xiàn)方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue項(xiàng)目中定時(shí)器無法清除的原因解決

    vue項(xiàng)目中定時(shí)器無法清除的原因解決

    頁面有定時(shí)器,并且定時(shí)器在離開頁面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下
    2024-02-02
  • Vue3?源碼解讀靜態(tài)提升詳解

    Vue3?源碼解讀靜態(tài)提升詳解

    這篇文章主要為大家介紹了Vue3源碼解讀靜態(tài)提升示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • 探秘vue-rx 2.0(推薦)

    探秘vue-rx 2.0(推薦)

    這篇文章主要介紹了探秘vue-rx 2.0(推薦),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-09-09
  • Vue?插件及瀏覽器本地存儲

    Vue?插件及瀏覽器本地存儲

    這篇文章主要介紹了Vue?插件及瀏覽器本地存儲,插件通常用來為Vue添加全局功能,包含install方法的一個(gè)對象。更多相關(guān)介紹,需要的小伙伴可以參考下面文章內(nèi)容
    2022-05-05
  • vue實(shí)現(xiàn)日歷備忘錄功能

    vue實(shí)現(xiàn)日歷備忘錄功能

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷備忘錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-06-06
  • Vue如何設(shè)置滾動條自動保持到最底端

    Vue如何設(shè)置滾動條自動保持到最底端

    在開發(fā)中我們常常會遇到需要讓滾動條保持到最底端的需求,比如在開發(fā)一個(gè)聊天框時(shí),請求接口拿到消息列表數(shù)據(jù),展示到前端頁面時(shí),需要讓滾動條自動滾到最底端,以此來展示最后的聊天記錄,這篇文章主要介紹了Vue如何設(shè)置滾動條自動保持到最底端,需要的朋友可以參考下
    2024-08-08

最新評論