是左边和右边分别有一个年份选择器,选择时间范围
时间: 2024-02-23 18:05:22 浏览: 14
如果你需要左右两侧都有年份选择器,你可以使用 `el-date-picker` 组件的 `range` 属性,将其设置为 `true`,这样就可以选择一个时间范围了。
具体步骤如下:
1. 在 `el-date-picker` 组件中添加 `range` 属性,并设置其 `start-placeholder` 和 `end-placeholder` 属性。
```
<el-date-picker
v-model="range"
type="daterange"
range-separator="至"
start-placeholder="开始年份"
end-placeholder="结束年份">
</el-date-picker>
```
2. 在 `data` 中添加 `range` 对象,并设置其 `pickerOptions` 属性。
```
data() {
return {
range: null,
pickerOptions: {
shortcuts: [{
text: '最近 5 年',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setFullYear(end.getFullYear() - 4);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近 10 年',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setFullYear(end.getFullYear() - 9);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近 20 年',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setFullYear(end.getFullYear() - 19);
picker.$emit('pick', [start, end]);
}
}]
}
}
}
```
3. 在 `el-date-picker` 组件中添加 `picker-options` 属性,将其设置为 `pickerOptions` 对象。
```
<el-date-picker
v-model="range"
type="daterange"
range-separator="至"
start-placeholder="开始年份"
end-placeholder="结束年份"
:picker-options="pickerOptions">
</el-date-picker>
```
这样就可以在左右两侧都显示年份选择器,并且可以使用 `pickerOptions` 中的 `shortcuts` 属性来添加时间范围的快捷选项。