【BUG】avoid using javascript keyword as property name: “return“ Raw expression ::picker-options=

文章讨论了在开发前端时,使用ElementUI的日期选择器在谷歌浏览器和IE浏览器间遇到的问题,由于IE不支持javascript关键字作为属性名,给出了将`disabledDate`方法名改为`DateFunc`并定义在methods中的解决方案。

项目场景:

开发前端页面,要求选择的时间比给定的时间大。
实现效果
在这里插入图片描述


问题描述

前端代码为:

<el-date-picker v-model="claimDate" type="date" format="yyyy-MM-dd" width='100%'
	value-format="yyyy-MM-dd" placeholder="选择日期" :clearable='false' :picker-options="{ disabledDate(time){ return time >= Date.now() || (dateMin?time < new Date(dateMin).getTime()-8.64e7 : null) }}">
</el-date-picker>

在测试的时候发现谷歌浏览器支持,但是IE浏览器报错。

报错截图
在这里插入图片描述

avoid using javascript keyword as property name: “return” Raw expression :pi


原因分析:

IE浏览器不支持javascript 关键字


解决方案:

直接上代码

<el-date-picker v-model="claimDate" type="date" format="yyyy-MM-dd" width='100%'
	value-format="yyyy-MM-dd" placeholder="选择日期" :clearable='false' :picker-options="{ disabledDate:DateFunc }">
</el-date-picker>
methods:{
	DateFunc : function(time){
		return time >= Date.now() || (dateMin?time < new Date(dateMin).getTime()-8.64e7 : null)
	}
}
在 **Element Plus(Vue 3)** 中,`:picker-options` **已经不再被支持**!这是你在使用 `el-date-picker` 时发现 `:picker-options="pickerOptions"` 不生效的根本原因。 --- ### ❌ 问题根源:`picker-options` 已被移除 在 **Element UI(Vue 2)** 中,你可以通过 `picker-options` 来配置 `disabledDate`、快捷选项等。 但在 **Element Plus(Vue 3)** 中,这个属性已被废弃,取而代之的是 **直接使用 `disabled-date` 属性(注意命名变化)**。 --- ## ✅ 正确做法:使用 `disabled-date` 属性 以下是修复后的 **Vue 3 + Element Plus** 正确实现方式: ```vue <template> <div style="padding: 20px;"> <!-- 年份选择 --> <el-select v-model="selectedYear" placeholder="请选择年份" @change="handleYearChange"> <el-option v-for="year in yearOptions" :key="year" :label="year" :value="year" /> </el-select> <!-- 日期范围选择器:使用 disabled-date 而不是 picker-options --> <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate" style="margin-left: 20px;" /> </div> </template> <script setup> import { ref, computed } from 'vue' const currentYear = new Date().getFullYear() const yearOptions = Array.from({ length: 6 }, (_, i) => currentYear - i) const selectedYear = ref(currentYear) const dateRange = ref([]) // 核心:使用 disabled-date 替代 picker-options.disabledDate const disabledDate = (time) => { // 禁用非 selectedYear 的日期 return time.getFullYear() !== selectedYear.value } const handleYearChange = (val) => { console.log('选择了年份:', val) // 清空不在该年内的已选范围 if (dateRange.value && dateRange.value.length > 0) { const [start, end] = dateRange.value const startYear = new Date(start).getFullYear() const endYear = new Date(end).getFullYear() if (startYear !== val || endYear !== val) { dateRange.value = [] } } } </script> ``` --- ### ✅ 关键修改点: | 错误用法 | 正确用法 | |--------|--------| | `:picker-options="pickerOptions"` | ❌ 已废弃 | | `:disabled-date="disabledDate"` | ✅ 正确方式 | - `disabled-date` 是一个函数,接收 `date` 对象(`Date` 类型),返回 `true` 表示禁用,`false` 表示可用。 - 它会自动应用于 `daterange` 中的每一个可选日期。 --- ### 📚 Element Plus 文档参考: 🔗 [https://element-plus.org/zh-CN/component/date-picker.html#disableddate](https://element-plus.org/zh-CN/component/date-picker.html#disableddate) > `disabled-date` 类型:`(date: Date) => boolean` > 用于设置不可选的日期。 --- ### ✅ 验证是否生效的方法: 你可以在 `disabledDate` 函数中加个 `console.log` 测试: ```js const disabledDate = (time) => { console.log('检查日期:', time.toDateString(), '是否禁用') return time.getFullYear() !== selectedYear.value } ``` 切换年份或打开日历,你会看到大量输出,说明函数已被调用。 --- ### ⚠️ 常见误区总结: | 错误 | 说明 | |------|------| | 使用 `picker-options` | Vue 3 + Element Plus 中已完全移除 | | 使用 `.getFullYear()` 但 `time` 是字符串 | `disabled-date` 接收的是 `Date` 对象,不是字符串 | | 没有使用 `ref` 或响应式变量 | `selectedYear` 必须是 `ref` 才能响应变化 | ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值