el-select 选择时间
时间: 2023-10-03 21:10:25 浏览: 54
时间选择控件
5星 · 资源好评率100%
el-select组件可以用于选择时间,可以通过以下步骤实现:
1. 在el-select组件中设置options属性为一个数组,数组中包含需要选择的时间点,如["08:00", "09:00", "10:00", "11:00", "12:00"]。
2. 设置el-select组件的value属性为需要默认选中的时间点。
3. 在el-select组件的change事件中,可以获取选择的时间点并进行相关操作。
示例代码如下:
```
<template>
<el-select v-model="selectedTime" @change="handleChange" placeholder="请选择时间">
<el-option v-for="time in times" :key="time" :label="time" :value="time"></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
times: ["08:00", "09:00", "10:00", "11:00", "12:00"],
selectedTime: "10:00"
};
},
methods: {
handleChange(value) {
console.log(`选择的时间为:${value}`);
// 进行相关操作
}
}
};
</script>
```
阅读全文