后端对于时间范围字段都是两个字段 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>
其中对开始时间做校验 如果开始时间没空 表单校验失败