问题
在基于vue3+element-plus前端项目中,在引用el-cascader组件多选时出现回显数据跟勾选数据不同步问题,本地运行没问题,部署到线上有问题,如图:
<el-cascader
v-model="promotionChannelListDemo"
:options="finalOptions"
placeholder="请选择"
:props="{ children: 'childList', emitPath: true, multiple: true, checkStrictly: false }"
:clearable="true"
:filterable="true"
@change="handlePromotionChannelsChangeDemo"
></el-cascader>
原因
因为项目的element-plus版本为2.2.36版本,该版本级联组件会出现回显数据不同步问题
1.赋值的时候循环数组异步赋值每个元素,但是该方案还是会有个别数据没有勾选问题;
promotionChannelList.value = []
for (let i = 0; i < checkList.length; i++) {
setTimeout(() => {
promotionChannelList.value.push(checkList[i])
}, 0)
}
2.最佳方案:升级element-plus到2.3.9版本,注:需要谨慎升级。
3.如果项目太大也可采用升级特定组件方式