Vue+ElementUI 搭建后台管理系统（实战系列三）

左手的ㄟ右手 2022-09-05 15:56 192阅读 0赞

##### 前言 #####

使用ElementUI已经有一段时间了，在一边上手开发后台管理系统的同事，也记录了一些笔记，一直都没有时间将这些零零散散的笔记总结起来，整理成一个比较系统详细一点的教程，可以留着以后来看。

--------------------

##### Vue+ElementUI 搭建后台管理系统（实战系列三）- 时间和日历组件的处理 #####

在文档里面，关于日期的组件，涉及到了单独的年月日日期选择器组件`DatePicker`,还有单独的时分秒时间选择器`TimePicker`,还有年月日时分秒集合在一起的日期时间选择器`DateTimePicker`.

不管是啥样的，只需要打开以下文档，里面都会安排的清清楚楚明明白白，完全不用担心不会使用的问题哦。

TimePicker 时间选择器  
https://element.eleme.io/\#/zh-CN/component/time-picker  
DatePicker 日期选择器  
https://element.eleme.io/\#/zh-CN/component/date-picker  
DateTimePicker 日期时间选择器  
https://element.eleme.io/\#/zh-CN/component/datetime-picker

在开发的过程中，会遇到这样的几个问题，记录下来。

1:在这三个组件里面，获取到当前系统的时间，获取当前的时间，渲染在界面，这里用日期时间选择器来具体操作一下。即DateTimePicker 日期时间选择器，默认获取当前日期

DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

![24fa597d0029d7b594957023d023b63b.png][]

获取到默认的时间之后，在提交获取的时间的格式的时候，也会遇到这样的问题，以什么样的格式提交的问题，一般默认的是为 Date 对象。如果不作处理的话，就是这样的一个格式`"2021-08-12T08:26:53.000Z"`

在实际开发中，需要传的参数的时间格式都是根据需要所定的，一般来说有三种

默认为 Date 对象
    值："2021-05-12T16:00:00.000Z"

使用 value-format
    值：2021-05-13

时间戳
    值：1620835200000

日期格式

使用format指定输入框的格式；使用value-format指定绑定值的格式。

![bfa05acd2f4a91f49814b94150761864.png][]

上面的例子里面是使用默认 Date 对象传值，我们这里实际需求中式第二种格式的，所以需要在`el-date-picker`里面设置一下时间的格式的参数，这里添加了一下`value-format="yyyy-MM-dd hh:mm:ss"`。

将自己手动选择的或者默认选择的时间全部设置成这样的需要的格式，当然了，这里是要根据自己的项目需要来设置的哟。

<el-date-picker v-model="value" type="datetime" value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择日期时间">
    </el-date-picker>

最后，点击确定提交按钮的时候，能够将选中的时间格式，提交一下~·

![fa491587dd7751bcaa4931935662a20d.png][]

参考代码：test.vue

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value" type="datetime" placeholder="选择日期时间">
        </el-date-picker>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          pickerOptions: {
            shortcuts: [
              {
                text: "今天",
                onClick(picker) {
                  picker.$emit("pick", new Date());
                },
              },
              {
                text: "昨天",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit("pick", date);
                },
              },
              {
                text: "一周前",
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit("pick", date);
                },
              },
            ],
          },
          value: "",
        };
      },
    
      created() {
        this.Date();
      },
      methods: {
        //获取当前年月日
        Date() {
          const nowDate = new Date();
          const date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
            hours: nowDate.getHours(),
            minutes: nowDate.getMinutes(),
            seconds: nowDate.getSeconds(),
          };
    
          const newmonth = date.month > 10 ? date.month : "0" + date.month;
          const newday = date.date > 10 ? date.date : "0" + date.date;
          const newminutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
          const newseconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
          this.value =
            date.year +
            "-" +
            newmonth +
            "-" +
            newday +
            " " +
            date.hours +
            ":" +
            newminutes +
            ":" +
            newseconds;
          
        },
      },
    };
    </script>
    <style scoped>
    .tab-container {
      margin: 30px;
    }
    </style>

以上，对时间的处理，是自己手写的代码，当然还有一种更方便更快捷的方式，就是引入一下时间库，一般会用到Vue的`moment.js`时间类库。这个库用起来也很方便，小巧耐用，完全不用担心会对各种复杂的时间的格式处理会出现bug的问题，强烈案例一波~~

Moment.js 是一个 JavaScript 日期处理类库（处理时间格式化的npm包）,用于解析、检验、操作、以及显示日期，在新公司的项目中,大量使用Moment来处理时间日期,非常方便好用。

优点：

不依赖任何第三方库  
支持字符串、Date、时间戳以及数组等格式  
可以同时在浏览器和node环境中使用  
前后端通用,文档也很详细  
方便了日常开发中对时间的操作,提高了开发效率  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[24fa597d0029d7b594957023d023b63b.png]: /images/20220829/7b366650cd4c4544a1fcce5c5b43aed9.png
[bfa05acd2f4a91f49814b94150761864.png]: /images/20220829/c4b83f9f76c142369e03cdcfa2ff8cac.png
[fa491587dd7751bcaa4931935662a20d.png]: /images/20220829/00676c960b4b408cad69891fcf85c4c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20220829/bd9c5bc1a4e643de936ea65a05d4c3b7.png

Vue+ElementUI 搭建后台管理系统（实战系列三）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读