-
解决使用ElementUI进行几个日期选择器之间的切换时，弹出框位置出错的问题
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"> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
如果使用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"> <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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
-
相关阅读:
HTML数字倒计时效果附源码
表哥月薪22k+，而我还在混日子……
基于随机森林实现特征选择降维及回归预测（Matlab代码实现）
代码随想录算法训练营DAY37|C++贪心算法Part.6|738.单调递增的数字、968.监控二叉树、贪心算法总结
已解决AttributeError: ‘function‘ object has no attribute ‘ELement‘
Misc思路
chatGPT教你算法(1)——常用的排序算法
硕士论文章节划分
零基础学Java（2）数据类型与变量
［大师C语言(第十八篇)］C语言typedef背后技术详解
- 原文地址：https://blog.csdn.net/lalala_dxf/article/details/127656476
