针对el-date-picker禁用功能初始时不显示,但切换日期后可以正常显示的问题

张开发
2026/4/3 21:20:31 15 分钟阅读
针对el-date-picker禁用功能初始时不显示,但切换日期后可以正常显示的问题
适用场景刷新页面后点击日期框展开页面并没有显示禁用日期但是点击或切换展开框后禁用又正常显示了刚打开点击后出现该场景的代码如下let holidays reactive([]); function getHolidays() { //异步获取数据 axios().then(res { holidays res.data }); } const disabledDateFn time { return holidays.includes(time.getTime()); //判断逻辑中使用到了该异步数据 }; getHolidays();修改方法用ref创建数据而非reactive核心原因当使用reactive定义的数据发生变化时虽然 Vue 会正确更新响应式数据但el-date-picker的disabled-date函数在组件初始化时就已经确定了其行为。如果在组件已经渲染后通过reactive更新了禁用规则组件并不会自动重新计算禁用状态。白话解释一下为什么这么改:组件初始渲染会调用disabled-date函数但此时数据值是undefined,返回都为false,无禁用项用reactive创建的数据,异步获取到数据的值后并不会重新调用disabled-date函数所以初始时不显示禁用项对展开框进行操作后重新调用了disabled-date函数禁用项显示而ref创建的数据在异步获取到数据的值后就会重新调用disabled-date函数所以初始时就显示修改后的代码let holidays ref([]); function getHolidays() { //异步获取数据 axios().then(res { holidays.value res.data }); } const disabledDateFn time { return holidays.value.includes(time.getTime()); //判断逻辑中使用到了该异步数据 }; getHolidays();

更多文章