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