记录vue elementUI el-date-picker年度选择

需求

el-date-picker年度选择器 能够动态禁用年份;如:禁止选用2021年2022年

实现方法

禁用某个年份正常是rutern (time.getFullYear() == 2022 || time.getFullYear() == 2024),所以就需要实现time.getFullYear() == 2022 || time.getFullYear() == 2024动态,但实现出来的是string,所以使用eval来执行

代码实现

<el-form-item label="年度"  prop="year">
    <el-date-picker
          v-model="year"
             type="year"
             style="width: 100%;"
            :picker-options="pickerOptions"
             value-format="yyyy"
             placeholder="请选择年度">
    </el-date-picker>
</el-form-item>
data () {
    return {
    	year: '',
    	pickerOptions: {
    	}
    }
}
created  () {
	 const arr = ["2021", "2022", "2023", "2024", "2026", "2027", "2029", "2031", "2032", "2033"]
	 this.pickerOptions = {
          disabledDate(time) {
            let val = `${time.getFullYear()} == ${arr[0]}`
		    arr.forEach((v, k) => {
		        if (k > 0) {
		          val += ` || ${time.getFullYear()}==${v}`
		        }
		      })
            return (eval(val))
          }
        }
}

实现效果

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐