解決element-ui el-checkbox的一些坑

更新時(shí)間：2023年04月18日 15:05:13 作者：夏天想

這篇文章主要介紹了解決element-ui el-checkbox的一些坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-ui el-checkbox的一些坑

<el-checkbox @change="handleCheckedCitiesChange" ?v-model="checkAll" ? :label="list.eventtypeid" ?>全選</el-checkbox>

?<el-checkbox-group ? v-model="checkOne" class="checkGroup" >
? ? ? <el-checkbox ?v-for="(operate,index1) in list.operation" :label="operate.actionid" ? :key="operate.actionid" ?@change="handleCheckedCitiesChange">{{operate.actionname}}</el-checkbox>
?</el-checkbox-group>

看上面的例子，都是把el-checkbox放在el-checkbox-group里面進(jìn)行循環(huán)的。

1.只能寫(xiě)@change事件而不能寫(xiě)@click。而且你可以把這個(gè)事件加在el-checkbox-group上面。這樣每次點(diǎn)擊的checkbox框變化他都能捕捉到。也可以放在el-checkbox上面，這樣點(diǎn)擊時(shí)獲取的是你當(dāng)時(shí)點(diǎn)擊的checkbox。

2.v-model上面的值是你checkebox的選中的值，這里label綁定的是id（也就是我們想要獲取給后臺(tái)的）而不是顯示的內(nèi)容。而且必須寫(xiě)個(gè)label賦值id，不然你寫(xiě)name的話，他選擇時(shí)就把名字相同的都選中了。v-model寫(xiě)在了checkbox-group上面。這樣獲取的就是循環(huán)的里面所有選中的，不是一條數(shù)組選中的。有了v-model就可以不用寫(xiě):checked屬性來(lái)決定他是否選中了。如果選中了。你就在v-model綁定的那個(gè)數(shù)組里添加上這個(gè)id值就可以啦，如果取消選中就在數(shù)組里刪除這個(gè)值。

刪除：比如this.actionid是我們想刪除的。

this.checkOne=this.checkOne.map(res=>{
? ? ? ? if(res!=this.actionid){return res;}
});

添加：this.checkOne.push(this.actionid);

3.@change事件如何獲取他點(diǎn)擊是取消還是選中呢？這里element-ui 1.~版本和2.~版本寫(xiě)法不一樣。

低版本獲取的是一個(gè)對(duì)象，你從對(duì)象里獲取到target.checked的boolean值。高版本直接是boolean值

1.~版本

handleCheckAllChange(event) {
? ? ? ? this.checkedCities = event.target.checked ? cityOptions : [];
? ? ? ? this.isIndeterminate = false;
? ? ? },

2.0版本的是boolean值

handleCheckAllChange(val) {
? ? ? ? this.checkedCities = val ? cityOptions : [];
? ? ? ? this.isIndeterminate = false;
? ? ? }

4.v-model="checkOne"綁定的checkOne是個(gè)數(shù)組。定義的時(shí)候如果不是數(shù)組可能會(huì)選擇一個(gè)其他所有的都被選中了

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

使用el-checkbox勾選出現(xiàn)的問(wèn)題：全選不生效，全選后底下的勾選不能回顯

有問(wè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": "銷(xiāo)量",
	           "values": [
		           "0",
		           "5"
	          ]
           },
           {
	           "title": "銷(xiāo)售額",
	           "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)的問(wèn)題：全選不生效，全選后底下的勾選不能回顯，排查問(wèn)題中發(fā)現(xiàn)打印this.checkeds能得到數(shù)據(jù)，全選和反選數(shù)據(jù)都能得到。

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

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

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

this.checkeds打印出來(lái)這個(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": "銷(xiāo)量",
	           "values": [
		           "0",
		           "5"
	          ]
           },
           {
	           "title": "銷(xiāo)售額",
	           "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>