当前位置：首页 > VUE

vue实现日期回填

2026-02-17 17:20:15VUE

Vue 实现日期回填的方法

在 Vue 中实现日期回填通常涉及表单数据的绑定和初始化。以下是几种常见的实现方式：

使用 v-model 绑定日期输入

通过 v-model 直接绑定到日期输入框，初始化时设置默认值即可实现回填。

<template>
  <input type="date" v-model="selectedDate" />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '2023-01-01' // 初始化回填的日期
    }
  }
}
</script>

动态设置日期值

如果需要从接口或其他动态来源获取日期并回填，可以在 mounted 或 created 钩子中赋值。

<template>
  <input type="date" v-model="selectedDate" />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    }
  },
  mounted() {
    // 模拟异步获取日期
    setTimeout(() => {
      this.selectedDate = '2023-01-01'
    }, 1000)
  }
}
</script>

使用第三方日期组件

如果使用第三方日期组件（如 Element UI 的 DatePicker），回填方式类似。

<template>
  <el-date-picker v-model="selectedDate" type="date" />
</template>

<script>
export default {
  data() {
    return {
      selectedDate: new Date() // 回填当前日期
    }
  }
}
</script>

格式化日期

如果需要回填特定格式的日期，可以使用库（如 moment 或 date-fns）进行格式化。

<template>
  <input type="date" v-model="formattedDate" />
</template>

<script>
import moment from 'moment'
export default {
  data() {
    return {
      selectedDate: moment().format('YYYY-MM-DD') // 回填格式化后的日期
    }
  }
}
</script>

表单重置时回填

在表单重置场景中，可以通过重置方法回填默认日期。

<template>
  <input type="date" v-model="selectedDate" />
  <button @click="resetForm">重置</button>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      defaultDate: '2023-01-01'
    }
  },
  methods: {
    resetForm() {
      this.selectedDate = this.defaultDate
    }
  }
}
</script>