解决elementPlus el-switch首次默认加载问题

254 阅读1分钟

elementPlus组件中存在这样一个问题,当首次进入页面,页面使用el-switch的地方会默认执行change方法,如果此时你写了一个弹窗相关的组件,它会直接弹出来,就很莫名奇妙。

<el-switch  v-model="scope.row.status"  :inactive-value="1"  :active-value="0"  @change="handleStatusChange(scope.row) />

有的说是去掉:inactive-value和:active-value中的“:”,其实并不能解决问题,一开始没找到方法,我就采用重新定义一个变量的方式,阻止change方法下面其他代码的执行,当这个变量值为true时,再执行。

后来看了源码才发现,当你绑定的status默认值不属于inactive-value和active-value中的任意一个时,就会出现这种问题。

源码如下:

if(![props.activeValue,props,inactiveValue].iincludes(actualValue.value)){emit(UPDATE_MODEL_EVENT,props.inactiveValue)emit(CHANGE_EVENT,props.inactiveValue)emit(INPUT_MODEL_EVENT,props.inactiveValue)}

发现问题的本质后,解决就简单了,如果返回数据属性是status,且不属于inactive-value和active-value中的任意一个时,直接将status值修改默认为active-value或inactive-value的值即可,先手动给它一个默认值。