elementui-plus el-time-picker 添加快捷选项
时间: 2024-09-24 12:22:16 浏览: 36
elementui elementUI - date-picker.zip
Element Plus 的 `el-time-picker` 组件是一个用于选择时间的日期时间选择器,它默认提供了一些预设的时间选项。如果你想添加自定义的快捷选项,可以使用组件的 API 和 Vue 的数据绑定特性。
首先,你需要在组件的 `data()` 函数中定义一个数组,这个数组包含了你想要的快捷选项:
```javascript
export default {
data() {
return {
customOptions: [
{ value: '09:00', label: '上午9点' },
{ value: '13:00', label: '下午1点' },
// ... 自定义其他选项
]
};
}
}
```
接下来,在模板中,你可以使用 `v-model` 指令绑定到这个自定义的选项数组,并设置 `options` 属性为这个值:
```html
<template>
<el-time-picker v-model="customOptions" :options="customOptions"></el-time-picker>
</template>
```
这样,当你打开时间选择器时,就会看到自定义的快捷选项了。如果你需要动态更新快捷选项,只需修改 `customOptions` 数据即可。
阅读全文