elementui时间查询
时间: 2023-10-30 17:07:00 浏览: 63
您可以使用 ElementUI 中的 DatePicker 组件来实现时间查询。具体步骤如下:
1. 在需要使用时间查询的页面中引入 ElementUI 的样式和组件:
```
<template>
<div>
<el-date-picker
v-model="date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
</template>
<script>
import { DatePicker } from 'element-ui';
export default {
components: {
DatePicker,
},
data() {
return {
date: '',
};
},
};
</script>
<style>
@import '~element-ui/lib/theme-chalk/index.css';
</style>
```
2. 在 data 中定义一个 date 变量,用于存储用户选择的时间范围。
3. 在 el-date-picker 组件中设置 v-model 为 date,type 为 daterange,range-separator 为时间范围的分隔符,start-placeholder 和 end-placeholder 分别为开始日期和结束日期的提示文字。
4. 在需要使用时间查询的地方使用 date 变量即可。