我的编程空间,编程开发者的网络收藏夹
学习永远不晚

解决element-uiel-checkbox的一些坑

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

解决element-uiel-checkbox的一些坑

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里面进行循环的。

1.只能写@change事件而不能写@click。而且你可以把这个事件加在el-checkbox-group上面。这样每次点击的checkbox框变化他都能捕捉到。也可以放在el-checkbox上面,这样点击时获取的是你当时点击的checkbox。

2.v-model上面的值是你checkebox的选中的值,这里label绑定的是id(也就是我们想要获取给后台的)而不是显示的内容。而且必须写个label赋值id,不然你写name的话,他选择时就把名字相同的都选中了。v-model写在了checkbox-group上面。这样获取的就是循环的里面所有选中的,不是一条数组选中的。有了v-model就可以不用写:checked属性来决定他是否选中了。如果选中了。你就在v-model绑定的那个数组里添加上这个id值就可以啦,如果取消选中就在数组里删除这个值。

删除:比如this.actionid是我们想删除的。

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

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

3.@change事件如何获取他点击是取消还是选中呢?这里element-ui 1.~版本和2.~版本写法不一样。

低版本获取的是一个对象,你从对象里获取到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是个数组。定义的时候如果不是数组可能会选择一个其他所有的都被选中了

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

使用el-checkbox勾选出现的问题:全选不生效,全选后底下的勾选不能回显

有问题的代码

<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: [], // 已选数据
        names: [], // 默认所有数据
        isIndeterminate: false, // 全选框是否在勾选状态
        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>

勾选出现的问题:全选不生效,全选后底下的勾选不能回显,排查问题中发现打印this.checkeds能得到数据,全选和反选数据都能得到。

一开始认为是结构中key的渲染,但是试过后发现 :key="index"还是:key="item.title"都不会影响回显。

仔细阅读官网发现this.checkedCities的数据结构不能那么复杂

所以我在handleCheckAllChangeSales方法中把过滤原来的this.detailsList 数,当全选时赋值给this.checkeds

this.checkeds打印出来这个值是这种结构

最终实现效果

所有代码

<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: [], // 已选数据
        names: [], // 默认所有数据
        isIndeterminate: false, // 全选框是否在勾选状态
        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>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

解决element-uiel-checkbox的一些坑

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

解决element-uiel-checkbox的一些坑

这篇文章主要介绍了解决element-uiel-checkbox的一些坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-05-16

解决Element-uiradio单选框label布尔/数值的一个坑

这篇文章主要介绍了解决Element-uiradio单选框label布尔/数值的一个坑,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
2023-05-16

element中el-form-item属性prop的坑怎么解决

本篇内容介绍了“element中el-form-item属性prop的坑怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!最近负责前后端
2023-06-29

vue使用element-ui按需引入时的坑怎么解决

这篇文章主要讲解了“vue使用element-ui按需引入时的坑怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue使用element-ui按需引入时的坑怎么解决”吧!步骤:第一步:
2023-06-30

使用el-checkbox-group选中后值为true和false遇到的坑怎么解决

这篇文章主要讲解了“使用el-checkbox-group选中后值为true和false遇到的坑怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“使用el-checkbox-group选
2023-07-02

缓存的一些常见的坑,你遇到过哪些,怎么解决的?

当数据时效性要求很高时,需要保证缓存中的数据与数据库中的保持一致,而且需要保证缓存节点和副本中的数据也保持一致,不能出现差异现象。

Go Slice扩容的坑有哪些及怎么解决

这篇文章主要介绍“Go Slice扩容的坑有哪些及怎么解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Go Slice扩容的坑有哪些及怎么解决”文章能帮助大家解决问题。知识重温切片底层结构定义:包
2023-07-05

详解关于Android Studio中安装和gradle的一些坑

本人从开始用Android Studio到现在已经快一年了吧,在我刚开始用的时候Android Studio还是1.2的版本。当时安装会因为国内墙的缘故,导致下载SDK步骤卡死无法安装。最近的版本似乎都没出现这个问题,但是还是要吐槽一下最近
2023-05-30

Vue3组件间传值的坑有哪些及怎么解决

这篇文章主要讲解了“Vue3组件间传值的坑有哪些及怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3组件间传值的坑有哪些及怎么解决”吧!实例填坑坑一1. 发现天坑我们通过一个计数
2023-07-06

编程热搜

目录