记录项目中实际出现的问题。
项目背景:后台返回数据,需要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是你操作的选项(更方便操作)

Logo

前往低代码交流专区

更多推荐