Element UI组件库DataPicker日期选择器自定义项shortcut

最新推荐文章于 2025-05-27 10:42:44 发布

weixin_34138056

最新推荐文章于 2025-05-27 10:42:44 发布

阅读量5.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui ViewUI

原文链接：https://juejin.im/post/5cdc4724e51d453ae54a2092

在毕业设计的招聘网站项目中，模仿前程无忧的日期选择器功能，利用Element UI组件库实现了DataPicker组件的自定义快捷选项（shortcut），提升了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近毕业设计在做一个招聘网站的项目,日期选择器模仿了前程无忧的效果,效果如下:

代码如下:

<template>
    <el-form
      :model="formModel"
      ref="formModel"
    >
      <el-form-item label="开始工作年月" prop="resumeJobYear">
        <el-date-picker
          v-model="formModel.resumeJobYear"
          type="month"
          format="yyyy年MM月"
          value-format="yyyy-MM"
          :picker-options="jobYearPickerOptions"
          class="job-year-picker"
          @change="jobYearC