el-checkbox出现的传值问题以及change事件传默认值

最新推荐文章于 2025-04-02 10:58:41 发布

望舒忘书

最新推荐文章于 2025-04-02 10:58:41 发布

阅读量6k

点赞数 2

文章标签： javascript css vue html5 node.js

本文链接：https://blog.youkuaiyun.com/DragonOfMoon/article/details/112986541

版权

本文讲述了在项目中遇到的checkbox选项过多问题，通过使用Vuex存储后台返回数据，实现实时回显和状态同步。作者详细介绍了如何将数据放入Vuex、监控checklist变化并更新状态的方法，以提高用户体验和数据管理效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录项目中实际出现的问题。
项目背景：后台返回数据，需要checkbox回显。一般来说直接遍历回显，但是出现的问题是checkbox的选项太多，还涉及到切换选项，checkbox的选项也会有改变。
解决办法： 再尝试了许多传值办法后无果，最后决定使用vuex存后台返回数据
1.vuex存入后台拿到的数据

computed:{
  /**
   * 获取vuex数据
   * @returns {any}
   */
  checkAllList(){
    return this.$store.getters.getSelectForecastObj;
  }
},

2.checklist存储checkbox所选择的选项。因为要后台返回所有选项，切换选项重新调用接口，所以直接每次接口返回的时候遍历vuex中是否有此选项，然后放入checklist。（就会显示已勾选状态，可能会重复自己处理数据）
3.选择新的数据，watch监听自己的checklist 放入vuex。

checkBox change

场景：因为每次都要监听自己所选的选项是否在vuex中有重复，所以这个事件可以返回自己的处理的选项。

<el-checkbox v-model="checkList" @change="checked=>handleCheckEvent(checked,item)>
</el-checkbox>

checked 是自己操作的状态 item是你操作的选项（更方便操作）