如何解決el-checkbox選中狀態(tài)更改問題

更新時(shí)間：2022年07月07日 12:06:31 作者：IM_chaochao

這篇文章主要介紹了如何解決el-checkbox選中狀態(tài)更改問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

el-checkbox選中狀態(tài)更改問題

相信很多猿友都被el-checkbox選中狀態(tài)更改的問題困擾的掉了不少頭發(fā)?。。。。。。∵@玩意真的是坑??！!今天，機(jī)緣巧合(認(rèn)真研究)之下，終于解決了這個(gè)問題。

問題分析

首先這個(gè)問題部分人給的解決方式修改v-model的綁定值，而且有部分人信誓旦旦的說這個(gè)方法有效。我測(cè)了一下，確實(shí)有效，但是是在沒有使用el-checkbox-group的情況下。具體代碼如下：

<template>
? <div>
? ? ? <el-checkbox label="1" v-model="checked1">checkbox1</el-checkbox>
? ? ? <el-checkbox label="2" v-model="checked2">checkbox2</el-checkbox>
? ? ? <el-checkbox label="3" v-model="checked3">checkbox3</el-checkbox>
? ? ? <el-button @click="dj">點(diǎn)擊切換</el-button>
? </div>
</template>

<script>
export default {
? data () {
? ? return {
? ? ? checked1: true,
? ? ? checked2: false,
? ? ? checked3: true
? ? }
? },
? methods: {
? ? dj () {
? ? ? let that = this
? ? ? if (that.checked1 === true) {
? ? ? ? that.checked1 = false
? ? ? } else {
? ? ? ? that.checked1 = true
? ? ? }
? ? ? if (that.checked2 === true) {
? ? ? ? that.checked2 = false
? ? ? } else {
? ? ? ? that.checked2 = true
? ? ? }
? ? ? if (that.checked3 === true) {
? ? ? ? that.checked3 = false
? ? ? } else {
? ? ? ? that.checked3 = true
? ? ? }
? ? }
? }
}
</script>

經(jīng)過測(cè)試，在不添加el-checkbox-group的情況下，修改v-model的綁定值確實(shí)能起到改變選中狀態(tài)的效果。但是一旦加上el-checkbox-group。此方法失效。

有的人說修改:checked的綁定值。經(jīng)測(cè)試，:checked只在賦初始值的時(shí)候有用，修改:checked的綁定值并不能起到修改選中狀態(tài)的效果。【無論有沒有el-checkbox-group包含都不可以】

測(cè)試的具體代碼如下，有興趣的可以復(fù)制到VUE項(xiàng)目中測(cè)試一下。

代碼說明：為了好記，三個(gè)復(fù)選框編號(hào)為1，2，3。

在不使用el-checkbox-group包含的情況下，v-model的值決定了復(fù)選框的選中狀態(tài)。而:checked的值只能決定初始選中狀態(tài)。

<template>
? <div>
? ? <!-- <el-checkbox-group v-model="group"> -->
? ? ? <el-checkbox label="1" v-model="model1" :checked="check1">checkbox1</el-checkbox>
? ? ? <el-checkbox label="2" v-model="model2" :checked="check2">checkbox2</el-checkbox>
? ? ? <el-checkbox label="3" v-model="model3" :checked="check3">checkbox3</el-checkbox>
? ? ? <br>
? ? <!-- </el-checkbox-group> -->
? ? ? <el-button @click="dj">點(diǎn)擊切換v-model值</el-button>
? ? ? <p>{{model1}}</p>
? ? ? <p>{{model2}}</p>
? ? ? <p>{{model3}}</p>
? ? ? <el-button @click="dj2">點(diǎn)擊切換checked值</el-button>
? ? ? <p>{{check1}}</p>
? ? ? <p>{{check2}}</p>
? ? ? <p>{{check3}}</p>
? </div>
</template>

<script>
export default {
? data () {
? ? return {
? ? ? group: [],
? ? ? model1: true,
? ? ? model2: false,
? ? ? model3: true,
? ? ? check1: false,
? ? ? check2: true,
? ? ? check3: false
? ? }
? },
? methods: {
? ? dj () {
? ? ? let that = this
? ? ? if (that.model1 === true) {
? ? ? ? that.model1 = false
? ? ? } else {
? ? ? ? that.model1 = true
? ? ? }
? ? ? if (that.model2 === true) {
? ? ? ? that.model2 = false
? ? ? } else {
? ? ? ? that.model2 = true
? ? ? }
? ? ? if (that.model3 === true) {
? ? ? ? that.model3 = false
? ? ? } else {
? ? ? ? that.model3 = true
? ? ? }
? ? },
? ? dj2 () {
? ? ? let that = this
? ? ? if (that.check1 === true) {
? ? ? ? that.check1 = false
? ? ? } else {
? ? ? ? that.check1 = true
? ? ? }
? ? ? if (that.check2 === true) {
? ? ? ? that.check2 = false
? ? ? } else {
? ? ? ? that.check2 = true
? ? ? }
? ? ? if (that.check3 === true) {
? ? ? ? that.check3 = false
? ? ? } else {
? ? ? ? that.check3 = true
? ? ? }
? ? }
? }
}
</script>

解決方式

在含有el-checkbo-group包含的情況下，再通過操作單個(gè)復(fù)選框的v-model的綁定值已經(jīng)起不到效果了。

但相信使用el-checkbox-group的人都知道，如果不指定el-checkbox-group的v-model屬性，則el-checkbox-group作用域內(nèi)的所有el-checkbox都將不會(huì)顯示。

這似乎說明group的v-model值相當(dāng)重要。而且這個(gè)值是一個(gè)數(shù)組，而不是一個(gè)字符串。

這是不是意味著group作用域內(nèi)的每一個(gè)checkbox都被動(dòng)態(tài)加載到這個(gè)group的數(shù)組中了呢？

于是我做了測(cè)試，發(fā)現(xiàn)果然如我們所想的那樣，group作用域內(nèi)的checkbox都被動(dòng)態(tài)加載到這個(gè)數(shù)組中了，而動(dòng)態(tài)加載checkbox的關(guān)鍵就在于給checkbox指定label屬性。

label屬性可以自定義。如果不指定checkbox的label屬性，則在數(shù)組中會(huì)顯示null。

如果出現(xiàn)多個(gè)不指定label屬性的checkbox，這些未指定label屬性的checkbox會(huì)被“同選同消”。

測(cè)試代碼放在文末，感興趣的同學(xué)可以復(fù)制到VUE項(xiàng)目中測(cè)試。

綜上：

在不加el-checkbox-group的情況下，指定并修改單個(gè)el-checkbox的v-model值就可以起到改變?cè)搹?fù)選框選中狀態(tài)的效果。
當(dāng)el-checkbox出現(xiàn)在el-checkbox-group的作用域內(nèi)時(shí)，則需要修改el-checkbox-group的v-model數(shù)組內(nèi)容，才能起到改變復(fù)選框選中狀態(tài)的效果。

PS:在group作用域中增加選中狀態(tài)比較簡(jiǎn)單，只需要在group的v-model綁定的數(shù)組中追加一個(gè)需要選擇的checkbox的label值就可以。如：

this.checkGroup.push('2') 【但是要確該復(fù)選框label不會(huì)在數(shù)組中同一時(shí)刻出現(xiàn)多個(gè)】

但是在group作用域中取消選中狀態(tài)相對(duì)來說比較復(fù)雜，以下提供兩種方式用作參考：

1、數(shù)組遍歷方式

checkGroup.forEach(function(item, index, arr) {
? ? if(item === "3") {
? ? ? ? arr.splice(index, 1);
? ? }
})

2、過濾器方式

checkGroup= checkGroup.filter(function(item) {
? ? return item != "3"
})

<template>
<!-- 測(cè)試代碼 -->
? <div>
? ? <p>這里是checkGroup:{{checkGroup}}</p>
? ? <br>
? ? <el-checkbox-group v-model="checkGroup">
? ? ? <el-checkbox label="1">checkbox1</el-checkbox>
? ? ? <el-checkbox label="2">checkbox2</el-checkbox>
? ? ? <el-checkbox label="3">checkbox3</el-checkbox>
? ? ? <el-checkbox>checkbox4</el-checkbox>
? ? ? <el-checkbox>checkbox5</el-checkbox>
? ? </el-checkbox-group>
? ? <el-button @click="click1">點(diǎn)擊追加選中2號(hào)復(fù)選框</el-button>
? </div>
</template>

<script>
export default {
? data () {
? ? return {
? ? ? checkGroup: ['1', '3']
? ? }
? },
? methods: {
? ? click1 () {
? ? ? let that = this
? ? ? that.checkGroup.push('2')
? ? }
? }
}
</script>

el-checkbox的基本使用,避坑指南

使用el-checkbox勾選出現(xiàn)的問題

全選不生效，全選后底下的勾選不能回顯

有問題的代碼

<template>
  <div>
    <el-checkbox
      class="all_t"
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChangeSales"
      >全選</el-checkbox
    >
    <el-checkbox-group
      v-model="checkeds"
      @change="handleCheckedColumnChangeSales"
    >
      <el-checkbox
        v-for="(item,index) in detailsList"
        :label="item.title"
        :key="index"
        >{{ item.title }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>

    
    <script>
  export default {
    name: 'demo',
    data() {
      return {
        checkAll: false,
        checkeds: [], // 已選數(shù)據(jù)
        names: [], // 默認(rèn)所有數(shù)據(jù)
        isIndeterminate: false, // 全選框是否在勾選狀態(tài)
        detailsList: [
         {
	           "title": "銷量",
	           "values": [
		           "0",
		           "5"
	          ]
           },
           {
	           "title": "銷售額",
	           "values": [
		           "8",
		           "1"
           		]
           },
           {
	           "title": "訂單量",
	           "values": [
		           "3",
		           "9"
           		]
           },
           {
	           "title": "退款量",
	           "values": [
		           "0",
		           "0"
           		]
           }
         ]
      }
    },
    created() {
      this.names = this.detailsList
    },
    methods: {
      handleCheckAllChangeSales(val) {
        this.checkeds = val ? this.detailsList : [];
        this.isIndeterminate = false;
      },
      handleCheckedColumnChangeSales(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.names.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.names.length
      }
    }
  };
</script>

勾選出現(xiàn)的問題

全選不生效，全選后底下的勾選不能回顯，排查問題中發(fā)現(xiàn)打印this.checkeds能得到數(shù)據(jù)，全選和反選數(shù)據(jù)都能得到。

一開始認(rèn)為是結(jié)構(gòu)中key的渲染，但是試過后發(fā)現(xiàn) :key="index"還是:key="item.title"都不會(huì)影響回顯。

仔細(xì)閱讀官網(wǎng)發(fā)現(xiàn)this.checkedCities的數(shù)據(jù)結(jié)構(gòu)不能那么復(fù)雜

所以我在handleCheckAllChangeSales方法中把過濾原來的this.detailsList 數(shù)，當(dāng)全選時(shí)賦值給this.checkeds

this.checkeds打印出來這個(gè)值是這種結(jié)構(gòu)

最終實(shí)現(xiàn)效果

所有代碼

<template>
   <div>
     <el-checkbox
       class="all_t"
       :indeterminate="isIndeterminate"
       v-model="checkAll"
       @change="handleCheckAllChangeSales"
       >全選</el-checkbox
     >
     <el-checkbox-group
       v-model="checkeds"
       @change="handleCheckedColumnChangeSales"
     >
       <el-checkbox
         v-for="(item) in detailsList"
         :label="item.title"
         :key="item.title"
         >{{ item.title }}</el-checkbox
       >
     </el-checkbox-group>
   </div>
</template>

<script>
  export default {
    name: 'demo',
    data() {
      return {
        checkAll: false,
        checkeds: [], // 已選數(shù)據(jù)
        names: [], // 默認(rèn)所有數(shù)據(jù)
        isIndeterminate: false, // 全選框是否在勾選狀態(tài)
        detailsList: [
         {
	           "title": "銷量",
	           "values": [
		           "0",
		           "5"
	          ]
           },
           {
	           "title": "銷售額",
	           "values": [
		           "8",
		           "1"
           		]
           },
           {
	           "title": "訂單量",
	           "values": [
		           "3",
		           "9"
           		]
           },
           {
	           "title": "退款量",
	           "values": [
		           "0",
		           "0"
           		]
           }
         ]
      }
    },
    created() {
      this.names = this.detailsList
    },
    methods: {
      handleCheckAllChangeSales(val) {
        var checkedsItem = val ? this.detailsList : []
        if (checkedsItem.length > 0) {
          checkedsItem.map(item => {
            this.checkeds.push(item.title)
          })
        } else {
          this.checkeds = []
        }
        this.isIndeterminate = false
      },
      handleCheckedColumnChangeSales(value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.names.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.names.length
      }
    }
  };
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: