elemenUI 2.x：单选框控制日期选择器的切换

持久的棒棒君

已于 2023-02-06 17:30:13 修改

阅读量1k

点赞数

分类专栏：大杂烩文章标签： elementui 前端

于 2022-11-03 18:30:00 首次发布

本文链接：https://blog.csdn.net/lalala_dxf/article/details/127656476

版权

大杂烩专栏收录该内容

259 篇文章 3 订阅

订阅专栏

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>