解决element-plus级联组件Cascader多选情况下回显数据错误问题

793 阅读1分钟

问题

在基于vue3+element-plus前端项目中,在引用el-cascader组件多选时出现回显数据跟勾选数据不同步问题,本地运行没问题,部署到线上有问题,如图: image.png

  <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版本,该版本级联组件会出现回显数据不同步问题

96c5799fe96524ea2f923bfe41e5298c.png

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.如果项目太大也可采用升级特定组件方式 9ba0651e8605e0285ef7d891ce90a558.png

相关文档

github.com/element-plu…
github.com/element-plu…