vue element-ui 根据 选择的年份，然后更新日期选择器的可选范围。

废话不多说,直接上代码

<template>

<div>

<el-date-picker

v-model="selectedDate"

type="date"

format="yyyy-MM-dd"

:picker-options="pickerOptions"

></el-date-picker>

</div>

</template>

<script>

export default {

data() {

return {

selectedYear: '', // 存储选择的年份

selectedDate: '', // 存储选择的日期

pickerOptions: {

disabledDate: this.disabledDate, // 设置日期禁选函数

},

};

},

methods: {

// 日期禁选函数

disabledDate(date) {

if (!this.selectedYear) {

return true; // 如果未选择年份，则禁止选择任何日期

}

const year = new Date(date).getFullYear();

return year !== parseInt(this.selectedYear, 10); // 只允许选择与选定年份相同的日期

},

},

};

</script>