需求:要求用户选择的出生年份需要满足他的年龄18-60岁。
设置picker-options
属性的disabledDate
可以做到。
注意点:
在我们编辑的时候需要进行回写,此时我们需要一个date类型的数据进行双向数据绑定,但是传递值的时候我们很多时候没有进行深拷贝,只是直接复制,这样在使用el-date-picker的时候导致数据没有被创建依赖收集。此时我们需要自己去进行一个复制,不是直接写this.editForm=this.rowData
。为了在我们新增的时候也能快速定位到可以选的值我们使用default-value
属性设置。
<template>
<div>
<el-form :model="editFrom" status-icon ref="editFrom" label-width="100px">
<el-form-item label="出生年份" prop="birthYear">
<el-date-picker
v-model="editFrom.birthYear"
type="year"
format="yyyy"
value-format="yyyy"
:editable="false"
placeholder="选择出生年份"
:default-value="selectMaxYear"
:picker-options="{disabledDate:selectYear}">
</el-date-picker>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props:{
rowData:{
type:Object,
required:true
}
},
data(){
return {
editFrom:{
birthYear: null
},
selectMaxYear: null
}
},
created(){
this.handleTime()
},
methods:{
handleTime(){
//方式一
//this.$set(this.editFrom,'birthYear',new Date(this.rowData.birthYear))
//方式二
Object.keys(this.rowData).forEach(key=>{
if(key!='birthYear'){
this.editFrom[key] = this.rowData[key]
}else{
this.editFrom[key] = this.rowData[key] ? new Date(this.rowData[key]) : null
this.selectMaxYear = this.editFrom[key] ? this.editFrom[key] : new Date((new Date().getFullYear() - 18)+'-1-1')
}
})
},
selectYear(date){
let year = new Date(date).getFullYear()
let currentYear = new Date().getFullYear()
if(currentYear - year > 60 || currentYear - year < 18){
return true
}else{
return false
}
}
}
}
</script>