el-date-picker 扩展

后端对于时间范围字段都是两个字段 start 及 end el-date-picker只能v-model一个数组 每次从数组中取值 赋值很麻烦 所以对它做了一下扩展 代码如下

<template>
  <el-date-picker v-bind="$attrs" v-on="$listeners" v-model="queryTime"></el-date-picker>
</template>

<script>
export default {
  props: {
    start: {
      type: String | undefined | null,
      required: true
    },
    end: {
      type: String | undefined | null,
      required: true
    }
  },

  watch: {
    start(newVal) {
      if(!newVal) {
        this.$emit("update:end", undefined)
      };
    }
  },

  computed: {
    queryTime: {
      get() {
        if (!this.$props.start) return [];
        return [this.$props.start || "", this.$props.end || ""]
      },
      set(values = []) {
        this.$emit("update:start", values && values[0] ? values[0] : "");
        this.$emit("update:end", values && values[1] ? values[1] : "");
      }
    }
  }
}
</script>

使用方式如下

 <el-form-item class="mb10" label="创建时间" prop="startDate">
          <DateRangePicker 
            :start.sync="queryParams.startDate" 
            :end.sync="queryParams.endDate" 
            value-format="yyyy-MM-dd"
            type="daterange" 
            range-separator="-" 
            start-placeholder="开始日期" 
            end-placeholder="结束日期" />
        </el-form-item>

其中对开始时间做校验 如果开始时间没空 表单校验失败