vue.js - 如何动态更新el-date-picker的disabledDate属性？

Question

我在点击按钮的时候，disabledDate ref确实变化了，但是el-date-picer上却没有变化，这该怎么办？

<script setup>
import {onUpdated, ref, watch} from "vue"
import {dayjs} from "element-plus"
const date = ref(dayjs().format("YYYY-MM"))
const disabledDate = ref((date) => { 
    return false
})
function changeMethon(type) {
    if(type === 1) {
        disabledDate.value = (date) => {
            console.log("type1 : ", date)
            return true
        }
    }else {
        disabledDate.value = (date) => {
            console.log("type2 : ", date)
            return false
        }
    }
}

onUpdated(() => {
    console.log("更新...", disabledDate.value)
})

</script>
<template>
    <el-date-picker
        v-model="date"
        type="month"
        format="YYYY-MM"
        value-format="YYYY-MM"
        style="width: 150px"
        :disabled-date="disabledDate"
    /> 
    <el-button @click="changeMethon(1)">切换禁止时间函数1</el-button>
    <el-button @click="changeMethon(2)">切换禁止时间函数2</el-button>
</template>

Answer 1

使用 watch 监听 disabledDate 的变化，每当 disabledDate 发生变化时，都会在控制台输出新的值。可以保证 el-date-picker 组件能够检测到 disabledDate 的变化。

<script setup>
import { onUpdated, ref, watch } from "vue";
import { dayjs } from "element-plus";

const date = ref(dayjs().format("YYYY-MM"));
const disabledDate = ref((date) => { 
    return false;
});

function changeMethon(type) {
    if (type === 1) {
        disabledDate.value = (date) => {
            console.log("type1 : ", date);
            return true;
        };
    } else {
        disabledDate.value = (date) => {
            console.log("type2 : ", date);
            return false;
        };
    }
}

onUpdated(() => {
    console.log("更新...", disabledDate.value);
});

// 监听 disabledDate 的变化
watch(disabledDate, (newVal) => {
    console.log("disabledDate 变化了:", newVal);
});
</script>

<template>
    <el-date-picker
        v-model="date"
        type="month"
        format="YYYY-MM"
        value-format="YYYY-MM"
        style="width: 150px"
        :disabled-date="disabledDate"
    /> 
    <el-button @click="changeMethon(1)">切换禁止时间函数1</el-button>
    <el-button @click="changeMethon(2)">切换禁止时间函数2</el-button>
</template>