解决element-plus el-date-picker回显失败问题

最新推荐文章于 2024-08-21 09:26:52 发布

深拥i小褚

最新推荐文章于 2024-08-21 09:26:52 发布

阅读量1.3k

点赞数 3

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/x_chu/article/details/136809575

版权

文章讲述了在项目中使用el-date-picker组件时遇到的回显问题，由于组件封装和时机问题导致回显失败。作者发现解决方案是在nextTick函数中设置formDate的值，确保在组件挂载完成后正确赋值。

摘要由CSDN通过智能技术生成

项目场景：

项目场景：检索条件需要添加默认时间

问题描述

el-date-picker回显失败，不回显

原因分析：

因为二次封装成了组件，所以在组件中这么写的，el-date-picker中我绑定的是formDate，没有深入去研究，大概是组件没挂在完之前赋值，导致回显失败

watch(
  [() => props.startTime, () => props.endTime],
  (newValue) => {
    if (newValue[0] && newValue[1]) {
      formDate.value = newValue;
    } else {
      formDate.value = '';
    }
  },
  {
    immediate: true,
  },
);

解决方案：

在 nextTick 中进行赋值

watch(
  [() => props.startTime, () => props.endTime],
  (newValue) => {
    if (newValue[0] && newValue[1]) {
      // 使用nextTick解决回显失败问题
      nextTick(() => {
        formDate.value = newValue;
      })
    } else {
      formDate.value = '';
    }
  },
  {
    immediate: true,
  },
);