ElementUI
日期选择器的切换实现
效果
实现
方式一：同一个日期组件，通过修改属性实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>日期选择器的切换</title>
<style>
.all{
width:500px;
position: absolute;
left:400px
}
</style>
</head>
<body>
<div id="app">
<template>
<div class="all">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="报表类型">
<el-radio-group v-model="radio" @change="changeRadio(radio)">
<el-radio-button label="1">日</el-radio-button>
<el-radio-button label="2">月</el-radio-button>
<el-radio-button label="3">自定义时间</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-date-picker
v-model="form.date"
:type="dateType"
:placeholder="placeholder"
:value-format="valueFormat"
start-placeholder="开始日期"
end-placeholder="结束日期"
:key="key"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="showData">
查询
</el-button>
</el-form-item>
</el-form>
</div>
</template>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
radio: '1', // 单选框，设置默认值为label=1的选项
dateType:'date',
placeholder:'选择日', // 无选择时的占位内容，设置默认为"选择日"
valueFormat:'yyyy-MM-dd', // 设置读取时间数据时的格式
form: {
date:'',
},
key:'', // 给日期选择器一个标号，防止弹出框位置出错
}
},
methods: {
changeRadio(radio){
this.form.date = '' // 先清空原来的值
if(radio == "1"){
this.dateType = "date"
this.placeholder = "选择日"
this.valueFormat="yyyy-MM-dd"
this.key="1"
}else if(radio == "2"){
this.dateType = "month"
this.placeholder = "选择月"
this.valueFormat="yyyy-MM"
this.key="2"
}else if(radio == "3"){
this.dateType = "daterange"
this.placeholder = "选择时间段"
this.valueFormat="yyyy-MM-dd"
this.key="3"
}
},
showData(){
console.log(this.form);
}
},
})
</script>
</body>
</html>
如果使用ElementUI进行几个日期选择器之间的切换时，发现弹出框位置出错，如下：
解决方法就是在日期选择器组件中添加一个属性key，给要切换的各个日期选择器一个唯一值，结果如下：
方式二：通过v-if/v-show隐藏切换过去的日期组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>日期选择器切换</title>
<style>
.all {
width: 500px;
position: absolute;
left: 400px
}
</style>
</head>
<body>
<div id="app">
<template>
<div class="all">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="报表类型">
<el-radio-group v-model="radio" @change="changeRadio(radio)">
<el-radio-button label="1">日</el-radio-button>
<el-radio-button label="2">月</el-radio-button>
<el-radio-button label="3">自定义时间</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="选择时间">
<div v-show="radio === '1'">
<el-date-picker v-model="day" type="date" placeholder="选择日" value-format="yyyy-MM-dd">
</el-date-picker>
</div>
<div v-show="radio === '2'">
<el-date-picker v-model="month" type="month" placeholder="选择月" value-format="yyyy-MM">
</el-date-picker>
</div>
<div v-show="radio === '3'">
<el-date-picker v-model="timeRange" type="daterange" value-format="yyyy-MM-dd"
start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="searchData">
查询
</el-button>
<el-button type="primary" @click="clear">
清空
</el-button>
</el-form-item>
</el-form>
</div>
</template>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
radio: '1', // 单选框，设置默认值为label=1的选项
day: '', // 某一天
month: '', // 某一个月
timeRange: [], // 时间段
form: {
beginTime: '',
endTime: ''
},
}
},
methods: {
// 单选框改变时，清空原来组件上的值
changeRadio(radio) {
this.day = ''
this.month = ''
this.timeRange = []
},
// 查询功能
searchData() {
// 处理时间段，将数组分成两个字符串，赋值给form表单中的两个属性
if (this.timeRange.length > 0) {
this.form.beginTime = this.timeRange[0]
this.form.endTime = this.timeRange[1]
}
// 处理某一个月，拿取该月的第一天到该月的最后一天
else if (this.month !== '') {
let date = new Date(this.month)
let month = (date.getMonth() + 1).toString().padStart(2,'0')
let year = date.getFullYear()
let beginTime = year + '-' + month + '-' + '01'
let day = new Date(year,month,0)
let endTime = year + '-' + month + '-' + day.getDate()
this.form.beginTime = beginTime
this.form.endTime = endTime
}
// 处理某一天
else if (this.day !== '') {
this.form.beginTime = this.day
this.form.endTime = this.day
}
// 输出查询结果
console.log(this.form);
},
// 清空
clear() {
this.form.beginTime = ''
this.form.endTime = ''
this.day = ''
this.month = ''
this.timeRange = []
}
},
})
</script>
</body>
</html>