el-date-picker shortcuts 快捷选项,点击后不赋值

53 阅读1分钟

使用pnpm引入element plus 2.10.5版本 之前使用yarn 引入没有出现这个问题。

还有一个小问题就是在生命周期 onMounted 给参数赋值会让组件弹出时间选择框。 求大神解答!!!

//package.json
{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.10.5",
    "vue": "^3.5.17"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.0",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.8.3",
    "vite": "^7.0.4",
    "vue-tsc": "^2.2.12"
  }
}

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const value2 = ref<Date[]>([])
onMounted(() => {
  value2.value = [
    new Date(2000, 10, 10, 10, 10),
    new Date(2000, 10, 11, 10, 10),
  ]
})
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
</script>

<template>
  <el-date-picker v-model="value2" type="datetimerange" @change="console.log(value2)" :shortcuts="shortcuts"
    range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
</template>

<style scoped>

</style>