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

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

<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="jobYearChange"
        ></el-date-picker>
        <span v-if="noExperience" class="no-experience">暂无工作经验</span>
      </el-form-item>
    </el-form>
</template>

<script>
export default {
  data() {
    const that = this;
    return {
      noExperience: false,
      formModel: {
       jobYear: ""
      },
      jobYearPickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "暂无工作经验",
            onClick(picker) {
              picker.$emit("pick");
              that.formModel.resumeJobYear = "";
              that.noExperience = true;
            }
          }
        ]
      }
    };
  },
  methods: {
    jobYearChange(param) {
    //datePicker的默认回调参数是选择了的日期
    //这里加了个判断的原因是,写起来感觉说不清楚
    //建议自己去掉判断后查看bug的效果,就明白加判断的原因
      if (param) {
        this.noExperience = false;
      }
    },
};
</script>
<style scoped lang="scss">
<style lang="scss">
//这里写的是全局样式
//审查发现,element的datePicker的选择框的html,是不在当前的Vue文件下的
//由于我想修改shortCut的样式,所以要在全局写
.el-date-picker.has-sidebar {
  width: 320px;
  .el-picker-panel__sidebar {
    top: auto;
    width: 100%;
    border: 0;
    .el-picker-panel__shortcut {
      border-top: 1px solid $border3;
      text-align: center;
    }
  }
  .el-picker-panel__body {
    margin: 0;
    .el-picker-panel__content {
      width: auto;
      margin-bottom: 40px;
    }
  }
}
// }
</style>