elementUI的日期选择器携带至今的临时方案

最新推荐文章于 2025-04-04 09:03:44 发布

原创最新推荐文章于 2025-04-04 09:03:44 发布

· 2.5k 阅读

2 ·

版权

文章标签：

#elementui #vue.js #前端 #eldatePicker #至今

vue 同时被 2 个专栏收录

32 篇文章

订阅专栏

element-ui

28 篇文章

订阅专栏

本文介绍了在ElementUI的el-date-picker组件中添加至今选项的思路和步骤，包括DOM修改、data和methods的调整以及样式的class修改。虽然存在如日期选择器初始为空时无清空按钮和样式兼容性问题等缺陷，但提供了临时的解决方法。

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

效果图

在这里插入图片描述

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提示：本文的大概内容：
在ElementUI的el-date-picker组件中添加至今选项

提示：以下是本篇文章正文内容，下面案例可供参考

一、思路

通过判断点击的至今按钮给当前行添加一个is_to_date状态字段,
这个is_to_date有以下功能:

用于控制当前的日期选择器是否是必填,
用于控制placeholder显示至今这个字符
给当天的日期组件添加修改placeholder样式的className

二、缺陷

由于出现至今的时候组件的v-model还是空值, 不会出现清空按钮且【有样式兼容性】

三、使用步骤

1.DOM的修改

<el-form-item 
:prop="'work[' + scope.$index + '].timeRange_e'"
:rules="[{ required: !scope.row.is_to_date, message: '请选择日期', trigger: 'change' }]"
class="w100per" label="" label-width="0">
   <el-date-picker
        v-model="scope.row.timeRange_e"
        :class="{'simulateVue_to_date':scope.row.is_to_date}"
        :picker-options="pickerWorkOptions_e"
        :placeholder="scope.row.is_to_date?'至今':'选择日期'"
        class="w100per simulateVue_to_date--cut-down-padding_left"
        format="yyyy-MM"
        prefix-icon="xxx"
        type="month"
        value-format="yyyy-MM"
        @focus="focus_simulateVue_to_date(scope.row.is_to_date,scope.$index)"
    >
    </el-date-picker>
 </el-form-item>

2.data的修改

  data () {
    let simulateVue = this;
    return {
		// ...
		simulateVue_to_date_i : null,
		pickerWorkOptions_e: {
	        disabledDate: (time) => {
	          let beginDateVal = dayjs().valueOf();
	          if (beginDateVal) {
	            return time.getTime() > beginDateVal;
	          }
	        },
	        shortcuts: [
	          {
	            text: "至今",
	            onClick (picker) {
	              picker.$emit("pick", "");
	              simulateVue.data_set_simulateVue_to_date(simulateVue, simulateVue.simulateVue_to_date_i).then(miu => {
	              });
	            }
	          }
	        ]
      	},
   	 }
}

3.methods的修改

    // dom 获取焦点事件
    focus_simulateVue_to_date (val, i) {
      this.simulateVue_to_date_i = i;
    },
    // data失去焦点事件
    data_set_simulateVue_to_date (_t, i) {
      return new Promise((resolve, reject) => {
        // _t.$forceUpdate();
        this.$nextTick(() => {
          _t.$refs.form.clearValidate([`work[${i}].timeRange_e`]);
          _t.form.work[i].is_to_date = true;
          _t.$set(_t.form.work[i], `is_to_date`, true);
        });
        resolve(1);
      });
    },

4.样式的class修改

将placeholder的color改成#000

.el-date-editor.el-input.el-input--mini.el-input--prefix.el-input--suffix.el-date-editor--month {
  &.simulateVue_to_date {
    .el-input__inner {
      &::-webkit-input-placeholder {
        color: #000;
      }
    }
  }