el-date-picker 动态设置 disabled-weeks
时间: 2024-11-03 11:21:18 浏览: 26
【JavaScript源代码】vue el-date-picker动态限制时间范围案例详解.docx
在 Element Plus 的 `el-date-picker` 组件中,动态设置 `disabled-weeks` 可以让你根据业务需求在运行时更改哪些周应该被禁用。这通常通过数据驱动的方式,在组件的 Vue 实例中管理一个包含禁用周信息的对象数组。
假设你有一个数组 `disabledDatesArray`,它存储了你想禁用的日期对象,每个日期对象都有 `startOfWeek` 和 `endOfWeek` 属性来表示一周的范围:
```javascript
data() {
return {
disabledDatesArray: [
{ startOfWeek: new Date('2022-10-15'), endOfWeek: new Date('2022-10-21') }, // 第一个禁用周期
// 添加更多的禁用周期...
],
};
},
```
然后你在模板中绑定这个属性到 `disabled-weeks`:
```html
<el-date-picker type="week" :disabled-weeks="disabledDatesArray.map(date => ({ start: date.startOfWeek, end: date.endOfWeek }))">
<!-- ... -->
</el-date-picker>
```
这样每当 `disabledDatesArray` 更新时,`disabled-weeks` 会自动更新为对应的禁用周配置,保持日期选择器的状态反映当前的数据状态。
阅读全文