当value-format="yyyy-MM-dd"
的格式不要改为"yyyyMMdd"
,否则会导致日期选择器禁用失效问题,因为该组件默认的格式就是yyyy-MM-dd。
<el-col v-for="(item, index) in formData" :key="index" ><el-date-pickerv-else-if="item.type === 'datePicker'"v-model="form[item.prop]":placeholder="item.placeholder":picker-options="item.pickerOptions"type="date"value-format="yyyy-MM-dd"clearable/>
</el-col>
在表单渲染时会调用this.beginDate()
和this.endDate()
data() {return {formData: [ {type: 'datePicker',placeholder: '起始日期',prop: 'startDate',pickerOptions: this.beginDate()},{type: 'datePicker',placeholder: '截止日期',prop: 'endDate',pickerOptions: this.endDate()}]}
}
methods: {beginDate() {const self = this;return {// 组件的方法,禁用返回的日期disabledDate(time) {if (self.form.endDate) {// 禁用大于结束日期的日期return time.getTime() > new Date(self.form.endDate).getTime();} }};},endDate() {const self = this;return {disabledDate(time) {if (self.form.startDate) {// 禁用小于开始日期的日期return time.getTime() < new Date(self.form.startDate).getTime();} }};}}