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

效果图

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

---

前言

提示：本文的大概内容：
在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;
      }
    }
  }

---

总结

必填的判定加入状态来区分, 通过状态来设置placeholder ，上面的缺陷还没有好的方法实现。尤其是至今的删除按钮无法出现