Vue Element Form表单时间验证控件使用

如果直接使用Element做时间选择器，其规则(rules)不添加type:'date',会提示类型错误，处理这个需要规范值的类型为date.

时间格式化过滤器

import Vue from 'vue'
import service from './service.js'
import onlineIcon from '@/assets/img/map/tsp_green.png'
import unlineIcon from '@/assets/img/map/tsp_gray.png'
import alramIcon from '@/assets/img/map/tsp_red.png'
import extremIcon from '@/assets/img/map/tsp_yellow.png'
import stopIcon from '@/assets/img/map/tsp_blue.png'
import unknow from '@/assets/img/map/tsp_black.png'
import grayAlarm from '@/assets/img/map/vehicle_direction_0.gif'
import unlineAlarm from '@/assets/img/map/1.gif'
import lineAlarm from '@/assets/img/map/2.gif'
import stopAlarm from '@/assets/img/map/3.gif'
import extremAlarm from '@/assets/img/map/4.gif'

let vm = new Vue()
let filters = {};

//是否注册成功 0--已注册 1--注册
filters.isRegisterFilter = function (item) {
    let filter = parseInt(item);
    if (filter == 0) {
        return vm.$t('filter.register');
    } else if (filter == 1) {
        return vm.$t('filter.noregister');
    } else {
        return "";
    }
}
// 车辆使用状态
filters.isStuas = item => {
    if (item == '0') {
        return vm.$t('filter.onStatus');
    } else {
        return vm.$t('filter.noStatus');
    }
}

// 车辆是否定位
filters.isLocatiion = item => {
    if(item == '1'){
        return '定位';
    }else{
        return '未定位';
    }
}

// 车辆树是否在线和离线，返回图片还是文字
filters.isOnline = (item = {}, flag = false) => {
    // 车牌号不存在-----图片为未知
    if (item.plateCode == undefined) {
        return flag ? '--' : unknow;
    }
    if(Number(item.locateStatus) === 0){
        return flag ? '定位异常' : extremIcon;
    }
    if ((Number(item.vehicleStatus) == 0) && (item.alarmCount > 0)) {
        return flag ? '车辆离线报警' : grayAlarm;
    } else if (Number(item.vehicleStatus) === 0) {
        return flag ? '车辆离线' : unlineIcon;
    }

    if (!item.locationDesc && Number(item.alarmCount) > 0) {
        return flag ? '定位异常报警' : extremAlarm;
    } else if (!item.locationDesc) {
        return flag ? '定位异常' : extremIcon;
    }

    if ((Number(item.gpsSpeed) == 0) && Number(item.alarmCount) > 0) {
        return flag ? '车辆停驶报警' : stopAlarm;
    } else if (Number(item.gpsSpeed) == 0) {
        return flag ? '车辆停驶' : stopIcon;
    }

    if ((Number(item.vehicleStatus) === 1) && (Number(item.alarmCount) > 0)) {
        return flag ? '车辆在线报警' : lineAlarm;
    } else if (Number(item.vehicleStatus) === 1) {
        return flag ? '车辆在线' : onlineIcon;
    }
}
// 车辆树是否在线和离线
filters.isOnlineState = (item) => {
    if (item == '1') {
        return vm.$t('filter.online')
    } else {
        return vm.$t('filter.offline')
    }
}

filters.accStatus = (item) => {
    return item == "1" ? "ACC(开)" : "ACC(关)";
}
filters.locationStatus = (item,flag) => {
    return item == "1" ?flag?"定位":'#a0d468':flag? "未定位":'red';
}
filters.oilWayStatus = (item) => {
    if (item == "1") {
        return "油路正常";
    } else if (item == "0") {
        return "油路断开";
    } else {
        return "--";
    }
}
filters.circuitStatus = (item) => {
    if (item == "1") {
        return "电路正常";
    } else if (item == "0") {
        return "电路断开";
    } else {
        return "--";
    }
}
filters.doorLockStatus = (item) => {
    if (item == "1") {
        return "车门加锁";
    } else if (item == "0") {
        return "车门解锁";
    } else {
        return "--";
    }
}
filters.locateStatus = (item) => {
    if (item == "1") {
        return "定位";
    } else if (item == "0") {
        return "未定位";
    } else {
        return "--";
    }
}

filters.operateStatus = (item) => {
    if (item == "1") {
        return "运营";
    } else if (item == "0") {
        return "停运";
    } else {
        return "--";
    }
}

filters.artificialLiftStatus = (item) => {
    return item == "0" ? "否" : "是";
}

filters.topCapStatus = (item) => {
    if (item == "0") {
        return "关";
    } else if (item == "1") {
        return "开";
    } else {
        return "--";
    }
}
// 车牌颜色
filters.plateCodeColor = (item) => {
    switch (item) {
        case "1":
            return vm.$t('filter.colorBlue');
        case "2":
            return vm.$t('filter.colorYellow');
        case "3":
            return vm.$t('filter.colorBlack');
        case "4":
            return vm.$t('filter.colorWhite');
        case "5":
            return vm.$t('filter.colorGreen');
        case "9":
            return vm.$t('filter.color');
        default:
            break
    }
}
// 车牌颜色
filters.plateCodeColor1 = (item) => {
    switch (item) {
        case "1":
            return '#2b62d0';
        case "2":
            return '#eba239';
        case "3":
            return '#000';
        case "4":
            return '#fff';
        case "5":
            return '#a0d468';
        case "9":
            return '#2b62d0';
        default:
            break
    }
}
filters.icType=(item)=>{
    switch (item) {
        case 1:
            return "上班";
        case 2:
            return "下班";
        default:
            break
    }


}
filters.icResult=(item)=>{
    switch (item) {
        case 0:
            return "读卡成功";
        case 1:
            return "密钥错误";
        case 2:
            return "卡被锁";
        case 3:
            return "卡被拔出";
        case 4:
            return "数据校验失败";
        default:
            break
    }


}
filters.isSendTo=(item)=>{
    switch (item) {
        case 0:
            return "否";
        case 1:
            return "是";
        default:
            break
    }


}

// 上级平台车辆类型
filters.superPlatformCarType = (item) => {
    switch (item) {
        case 0:
            return '普通车辆';
        case 1:
            return '跨域货车';
        case 2:
            return '跨域客车';
        default:
            break
    }
}

// 多媒体管理(类型)
filters.mediaType = (item) => {
    switch (item) {
        case 0:
            return vm.$t('filter.picture');
        case 1:
            return vm.$t('filter.music');
        case 2:
            return vm.$t('filter.video');
        default:
            break
    }
}

// 多媒体管理(格式)
filters.formatter = (item) => {
    switch (item) {
        case 0:
            return vm.$t('filter.jpg');
        case 1:
            return vm.$t('filter.tif');
        case 2:
            return vm.$t('filter.mp3');
        case 3:
            return vm.$t('filter.wav');
        case 4:
            return vm.$t('filter.wmv');
        default:
            break
    }
}
// 报警处理状态(类型)
filters.alarmTp = (item) => {
    switch (item) {
        case 0:
            return '未处理';
        case 1:
            return '处理完毕';
        case 2:
            return '不做处理';
        case 3:
            return '将来处理';   
        default:
            break
    }
}
// 多媒体管理(触发事件类型)
filters.eventType = (item) => {
    switch (item) {
        case 0:
            return vm.$t('filter.incident0');
        case 1:
            return vm.$t('filter.incident1');
        case 2:
            return vm.$t('filter.incident2');
        case 3:
            return vm.$t('filter.incident3');
        default:
            break
    }
}

// 文字是否有值 --- unit文本的单位，当item有值的情况下，存在单位
filters.isValue = (item, unit) => {
    if (item) {
        return unit ? (item + unit) : item;
    } else {
        return '/'
    }
}

//地图类型过滤
filters.mapType = (item) => {
    switch (item) {
        case 1:
            return '百度';
        case 2:
            return '谷歌';
        case 3:
            return '高德';
        default:
            break
    }
}
//运营车辆类型过滤
filters.enterpriseType = (item) => {
    let items = item.split(','),
        reArr = [];
    items.forEach(ele => {
        switch (ele) {
            case '1':
                reArr.push('货运')
                break;
            case '2':
                reArr.push('渣土')
                break;
            case '3':
                reArr.push('环卫')
                break;
            case '4':
                reArr.push('客运')
                break;
        }
    });
    return reArr.length == 0?'':reArr.join(',')
}
// 方向过滤
filters.direction = (item) => {
    let direction = [
        "正北", "东偏北", "东北", "北偏东",
        "正东", "南偏东", "东南", "东偏南",
        "正南", "西偏南", "西南", "南偏西",
        "正西", "北偏西", "西北", "西偏北"
    ];
    let index = Math.floor((parseInt(item) + 11) % 360 / 22.5);
    return direction[index];
}
// liftingState--举升状态 
filters.liftingState = (item) => {
    if (item == '0') {
        return 1
    } else if (item == '1') {
        return 2
    } else {
        return ''
    }
}
// 开盒盖状态
filters.openCapState = (item) => {
    if (item == '0') {
        return 3
    } else if (item == '1') {
        return 4
    } else {
        return ''
    }
}
filters.loadCondition = (item) => {
    if (item == '00' || item == '10') {
        return 5
    } else if (item == '01') {
        return 6
    } else if (item == '11') {
        return 7
    } else {
        return ''
    }
}
// 不同状态显示不同的信息
filters.switchState = (item) => {
    let html = "";
    switch (item) {
        case 1:
            return html = '未举升';
        case 2:
            return html = '举升';
        case 3:
            return html = '顶盖闭合';
        case 4:
            return html = '顶盖开启';
        case 5:
            return html = '空载';
        case 6:
            return html = '半载';
        case 7:
            return html = '满载';
        default:
            return html = '未知';
    }
}
//can状态
filters.canDataReturn = (item) =>{
    let html = ''
    switch(item.seriesName){
        case '行驶速度':
        return html = item.data + ' (km/h)';
        case 'GPS速度':
        return html = item.data + ' (km/h)';
        case '油耗':
        return html = item.data + ' (L)';
        case 'ACC开关':
        return html = (item.data==1||item.data == true)?' 开':' 关';
        default:
        return html = '未知';
    }
}

// 报警级别过滤
filters.alarmLevel = (item) => {
    switch (item) {
        case 0:
            return '紧急报警';
        case 1:
            return '中级报警';
        case 2:
            return '一般报警';
        case 3:
            return '信息提示';
        default:
            return '未知'
    }
}
filters.orderTypeS = (item)=>{
    switch (item) {
        case 0:
            return '初始';
        case 1:
            return '成功';
        case 2:
            return '设备不在线';
        case 3:
            return '失败';
        case 4:
            return '等待回应超时';
        case 5:
            return '等待回应中';
        case 6:
            return '作废';
        default:
            return '未知'
    }
},
filters.stateType = (item)=>{
    switch (item) {
        case 10:
            return '所有';
        case 0:
            return '下级平台所属单一平台';
        case 1:
            return '当前连接的下级平台';
        case 2:
            return '下级平台所属单一业户';
        case 3:
            return '下级平台所属所有业户';
        case 4:
            return '下级平台所属所有平台';
        case 5:
            return '下级平台所属所有平台和业户';
        case 6:
            return '下级平台所属所有政府监管平台（含监控端）';
        case 7:
            return '下级平台所属所有企业监控平台';
        case 8:
            return '下级平台所属所有经营性企业监控平台';
        case 9:
            return '下级平台所属所有非经营性企业监控平台';
     
            
        default:
            return '未知'
    }
}
//能力id值过滤 1---温度；2---承重；3---速度；4---顶盖开启；5---车斗举升
filters.abillityIds = (item, id) => {
    if (item) {
        let itemIds = item.split(',')
        let itemid = itemIds.find(val => {
            return val == id;
        })
        return itemid ? true : false;
    } else {
        return false
    }
}

// 承重的过滤
filters.bearing = item => {
    if (+item >= 0 && +item <= 30) {
        return '空载'
    } else if (+item > 30 && +item <= 70) {
        return '半载'
    } else if (+item > 70 && +item <= 100) {
        return '满载'
    } else if (item == "-1") {
        return '保留'
    }
}
// 小数点截取相应位数
filters.toFixed = (item, num) => {
    let args = Array.prototype.slice.call(arguments, 1);
    return isNaN(Number(item)) ? "" : Number(item).toFixed(num);
}
//时间范围过滤
//时间格式(2017-8-29 00:00:00) -----> 转换成天数(3.0)
filters.timeRange = (startTime, endTime) => {
    let days = (new Date(filters.timeStamp(endTime)) - new Date(filters.timeStamp(startTime))) / 86400000
    // let days = (new Date(Date.parse(endTime.replace(/-/g, "/"))).getTime()-new Date(Date.parse(startTime.replace(/-/g, "/"))).getTime())/86400000
    // let days = (new Date(endTime) - new Date(startTime)) / 86400000
    // console.log(days1,days)
    let num = days.toFixed(1)
    return num
}

/* 时间过滤*/
// new Date(时间戳) ----> 时间格式化(2017-07-10)
filters.format = (timeNumber, format) => {
    if (!timeNumber) {
        return
    }
    let html,
        timetemp = typeof timeNumber == 'object' ? timeNumber : new Date(Number(timeNumber)),
        year = timetemp.getFullYear(),
        month = timetemp.getMonth() + 1,
        day = timetemp.getDate(),
        hours = timetemp.getHours(),
        mins = timetemp.getMinutes(),
        seconds = timetemp.getSeconds();
    switch (format) {
        case 'yyyy-MM':
            html = year + '-' + (month < 10 ? "0" + month : month);
            break;
        case 'yyyy-MM-dd':
            html = year + '-' + (month < 10 ? "0" + month : month) + '-' + (day < 10 ? "0" + day : day);
            break;
        case 'yyyy-MM-dd start':
            html = year + '-' + (month < 10 ? "0" + month : month) + '-' + (day < 10 ? "0" + day : day) +
                " 00:00:00";
            break;
        case 'yyyy-MM-dd end':
            html = year + '-' + (month < 10 ? "0" + month : month) + '-' + (day < 10 ? "0" + day : day) +
                " 23:59:59";
            break;
        case 'yyyy-MM-dd HH:mm:ss':
            html = year + '-' + (month < 10 ? "0" + month : month) + '-' + (day < 10 ? "0" + day : day) +
                " " + (hours < 10 ? "0" + hours : hours) + ":" + (mins < 10 ? "0" + mins : mins) + ":" + (seconds < 10 ? "0" + seconds : seconds);
            break;
        case 'yyyy/MM/dd HH:mm:ss':
            html = year + '/' + (month < 10 ? "0" + month : month) + '/' + (day < 10 ? "0" + day : day) +
                " " + (hours < 10 ? "0" + hours : hours) + ":" + (mins < 10 ? "0" + mins : mins) + ":" + (seconds < 10 ? "0" + seconds : seconds);
            break;
        case 'yyyy/MM/dd HH:mm':
            html = year + '/' + (month < 10 ? "0" + month : month) + '/' + (day < 10 ? "0" + day : day) +
                " " + (hours < 10 ? "0" + hours : hours) + ":" + (mins < 10 ? "0" + mins : mins);
            break;
        case 'HH:mm:ss':
            html = (hours < 10 ? "0" + hours : hours) + ":" + (mins < 10 ? "0" + mins : mins) + ":" + (seconds < 10 ? "0" + seconds : seconds);
            break;
        default:
            html = year + '-' + (month < 10 ? "0" + month : month) + '-' + (day < 10 ? "0" + day : day) +
                " " + (hours < 10 ? "0" + hours : hours) + ":" + (mins < 10 ? "0" + mins : mins) + ":" + (seconds < 10 ? "0" + seconds : seconds);
            break;
    }
    return html;
}

/*
* 显示当前日期的周---月 ---季度
*/
filters.dateWeekMonth = function(timer, format='yyyy-MM-dd'){
    // 对传入的事件进行处理 转换正确的格式
    const init = timer => {
        if(typeof timer === 'string'){
            return new Date(timer.replace(/(d{4})[.|/](d{2})[.|/](d{2})/g, '$1-$2-$3'));
        }else{
            throw new Error('timer arguments is not string!');
        }
    };
    const options = {
        num: init(timer).getDay(),
        year: init(timer).getFullYear(),
        month: init(timer).getMonth(),
        day: init(timer).getDate()
    };
    const getWeekStart = new Date(options.year, options.month, options.day - options.num);
    const getWeekEnd = new Date(options.year, options.month, options.day + (6 - options.num));
    const getMonthStart = new Date(options.year, options.month, 1);
    const getMonthEnd = new Date(options.year, options.month, filters.getMonthDays(options.year, options.month + 1));
    const getQuarterStart = new Date(options.year, filters.getQuarterStartMonth(options.month), 1);
    const getQuaterEnd = filters.AddDays(filters.AddMonths(getQuarterStart, 3), -1);
    return {
        week: {
            WeekStart: filters.format(getWeekStart, format),
            WeekEnd: filters.format(getWeekEnd, format)
        },
        month: {
            MonthStart: filters.format(getMonthStart, format),
            MonthEnd: filters.format(getMonthEnd, format)
        },
        quarter: {
            QuarterStart: filters.format(getQuarterStart, format),
            QuarterEnd: filters.format(getQuaterEnd, format)
        }
    };
}

/*
 * 时间转换
 * --时间格式化(字符串)（2017-10-13 03:10:40）--> 时间戳
 */
filters.timeStamp = function (str) {
    var timeStamp = new Date(Date.parse(str.replace(/-/g, "/")));
    return timeStamp.getTime();
}

/*
* 得到每个月的天数
*/
filters.getMonthDays = function(myYear, myMonth){
   var days;    
   if (myMonth == 2) {
       days = myYear % 4 == 0 ? 29 : 28;     
   }else if (myMonth == 1 || myMonth == 3 || myMonth == 5 || myMonth == 7 || myMonth == 8 || myMonth == 10 || myMonth == 12) {
       days = 31;
   }else {
       days = 30;    
   }
   return days;
}
/*
* 获取季度的开始月份
*/
filters.getQuarterStartMonth = function(myMonth) {
     if (myMonth <= 2) return 0;
     else if (myMonth <= 5) { return 3; }
     else if (myMonth <= 8) { return 6; }
     else { return 9; }
}
filters.AddDays = function(d, n){
     var t = new Date(d);
     t.setDate(t.getDate() + n);
     return t;
}
filters.AddMonths = function(d, n){
     var t = new Date(d);
     t.setMonth(t.getMonth() + n);
     if (t.getDate() != d.getDate()) { t.setDate(0); }
     return t;
}

// 开始时间与结束时间比较
filters.CompareDate=function(start,end)
{
  return ((new Date(start.replace(/-/g,"/"))) < (new Date(end.replace(/-/g,"/"))));
}
// 开始时间是否大于当前系统时间
filters.CompareStartDatetime=function(start,nowtime)
{
  return ((new Date(start.replace(/-/g,"/"))) > (new Date(nowtime.replace(/-/g,"/"))));
}
/* 
 * 描述：动态取得本地资源文件内容 
 *  
 * 参数： 
 *   key 对应的资源的key 
 *   params 对应资源中的参数对象(Hash) 
 *    
 * 返回：对应的资源内容 
 *  
 * 用法： 
 *      getLocale("helloParam",{first:value1,second:value2}); 
 */
filters.lanReplace = function (str, params) {
    var result = ""; // 对应的资源的内容  
    if (str && params) {
        result = str;
        var regExp = new RegExp(); //替换资源中参数的正则  
        for (var k in params) {
            regExp = eval("/{{:" + k + "}}/g");
            result = result.replace(regExp, params[k]);
        }
        if (/{{:[a-zA-Z]+}}/.test(result)) {
            result = result.replace(/{{:[a-zA-Z]+}}/g, "No Value");
        }
    }
    return result;
}

/**
 * 
 * @param {*透传下发方式} type 
 */
filters.sendTypes= (type)=>{
    switch(type){
        case 0:
            return vm.$t("transparentInfoSend.gnssModelDetailData");
            break;
        case 11:
            return vm.$t("transparentInfoSend.roadTransICCardInfo");
            break;
        case 65:
            return vm.$t("transparentInfoSend.serialCom1");
            break;
        case 66:
            return vm.$t("transparentInfoSend.serialCom2");
            break;
        case 245:
            return vm.$t("transparentInfoSend.selfDefined245");
            break;
        case -1:
            return vm.$t("transparentInfoSend.userSelfDefined");
            break;
        default:
            break;
    }
}

export default filters

 表单验证日期处理：

<template>
	<el-row class="container" :gutter="20">	
		<el-col :span="24">
			<el-form :model="formData" label-position="top" :inline="false" :rules="rules" ref="addForm">
				<el-form-item :label="$t('information.infoTypeContent')" prop="infoType">
					<el-select v-model.trim="formData.infoType" size="small"  style="360px;" >
					      <el-option
							v-for="item in SELECT_DATA"
							:key="item.infotype"
							:label="item.infoname"
							:value="item.infotype">
							</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('information.startSendTimeStr')" prop="startSendTimeStr">
					 <el-date-picker
					   style="360px;"
						v-model="formData.startSendTimeStr"
						type="datetime"
						placeholder="选择日期和时间"
						align="right"
						size="small" 
						value-format="String"
						@change="dateStartTimeChange">
						</el-date-picker>
				    </el-form-item>
				<el-form-item :label="$t('information.endSendTimeStr')" prop="endSendTimeStr">
					 <el-date-picker
					   style="360px;"
						v-model="formData.endSendTimeStr"
						type="datetime"
						placeholder="选择日期和时间"
						align="right"
						size="small"
						@change="dateEndTimeChange">
						</el-date-picker>
				    </el-form-item>
				</el-form-item>
				<el-form-item :label="$t('information.information')" prop="information">
					<el-input type="textarea" rows="3" v-model.trim="formData.information " size="small" ></el-input>
				</el-form-item>
			</el-form>
			</el-col>
		<el-col :span="24" class="dialog-footer">
			<el-button :loading="loading" type="primary" @click="confirm">{{$t('action.save')}}</el-button>
			<el-button @click="options.flag=false">{{$t('action.cancel')}}</el-button>
		</el-col>
	</el-row>
</template>

<script>
import {COMMON} from '@/utils'
	export default{
		props: {
			options: {}
		},
		data(){
			return{
				SELECT_DATA:[],
				formData:{
					infoType : '',
					startSendTimeStr : '',
					endSendTimeStr:'',
					startSendTime: '',
					endSendTime:'',
					information:''
				},
				loading:false,
				rules: {
					infoType : [
						{ required: true, message: this.$t('filter.noempty'), trigger: 'blur,change' }
					],
					information : [
						{ required: true, message: this.$t('filter.noempty'), trigger: 'blur,change' },
						{ min:1, max: 500, message: this.$filter.lanReplace(this.$t('filter.Length'),{min:1,max:500}) }
					],
					startSendTimeStr : [
						{ type: 'date', required: true, message: this.$t('filter.noempty'), trigger: 'change' }
					],
					endSendTimeStr : [
						{ type: 'date',required: true, message: this.$t('filter.noempty'), trigger: 'change' }
					],
				}
			}
		},
		methods: {
		    dateStartTimeChange(){
				this.formData.startSendTime=this.formData.startSendTimeStr==null?"":this.$filter.format(this.formData.startSendTimeStr,"yyyy-MM-dd HH:mm:ss");
			},
			dateEndTimeChange(){
				this.formData.endSendTime=this.formData.endSendTimeStr==null?"":this.$filter.format(this.formData.endSendTimeStr,"yyyy-MM-dd HH:mm:ss");
			},
		   confirm(){
				this.$refs['addForm'].validate(valid => {
					if(valid){
						let params = {
							infoType :this.formData.infoType ,
							startSendTimeStr :this.formData.startSendTime, 
							endSendTimeStr :this.formData.endSendTime, 
							information :this.formData.information
						};
						console.log(params);

						if(!this.$filter.CompareDate(params.startSendTimeStr,params.endSendTimeStr)){
							this.$message.error({ message: this.$t("information.timeInvalidAlert") });
							return ;
						}
						this.loading = true;
						this.$store.dispatch('insertInformation', params).then(data => {
							this.loading = false
							if (!data.flag && !!data.errorCode){
								// this.$notify.error({message: this.$t("error."+data.errorCode)});
								this.$message.error({ message: this.$t("error."+data.errorCode) });
							}else{
								this.$emit('confirm')
								// this.$notify.success(this.$t('action.addSuccess'));
								this.$message.success(this.$t('action.addSuccess'));
								this.options.flag = false;
							}
						}).catch(error=>{
							this.loading = false;
						})	
					}else{
							return false
					}
				})
			},
			loadSelectData(){
				this.$store.dispatch('getAllInformationTypeList').then(data =>{
					if(data.flag && data.data.length!=0){
						this.SELECT_DATA=data.data;
						for(var i=0;i<this.SELECT_DATA.length;i++){
                            this.SELECT_DATA[i].infotype+="";
                        }
					}else{
						this.SELECT_DATA =[];
					}
				});
			}
		},
		watch: {
			'options.flag'(newVal){
				if(!newVal){
					this.$refs['addForm'].resetFields()
				}
			}
		},
		mounted(){
			this.loadSelectData();
		}
	}
</script>
<style lang="scss" scoped>

</style>

 修改mounted函数时间格式化：

<template>
    <div>
        <el-row class="container" :gutter="20">
            <el-col :span="24">
                <el-form :model="formData" label-position="top" :inline="false" :rules="rules" ref="modify">
                <el-form-item :label="$t('information.infoTypeContent')" prop="infoType">
					<el-select v-model="formData.infoType" size="small"  style="360px;"  >
					      <el-option
							v-for="item in SELECT_DATA"
							:key="item.infotype"
							:label="item.infoname"
							:value="item.infotype">
							</el-option>
					</el-select>
				</el-form-item>
			<el-form-item :label="$t('information.startSendTimeStr')" prop="startSendTimeStr">
					 <el-date-picker
                        style="360px;"
						v-model="formData.startSendTimeStr"
						type="datetime"
						placeholder="选择日期和时间"
						align="right"
						size="small"
                        @change="dateStartTimeChange">
						</el-date-picker>
				    </el-form-item>
				<el-form-item :label="$t('information.endSendTimeStr')" prop="endSendTimeStr">
					 <el-date-picker
                        style="360px;"
						v-model="formData.endSendTimeStr"
						type="datetime"
						placeholder="选择日期和时间"
						align="right"
						size="small"
                        @change="dateEndTimeChange">
						</el-date-picker>
				    </el-form-item>
				</el-form-item>
				<el-form-item :label="$t('information.information')" prop="information">
					<el-input type="textarea" rows="3" v-model.trim="formData.information " size="small" ></el-input>
				</el-form-item>
                </el-form>
            </el-col>
            <el-col :span="24" class="dialog-footer">
                <el-button :loading="loading" type="primary" @click="confirm">{{$t('action.confirm')}}</el-button>
                <el-button @click="options.flag=false">{{$t('action.cancel')}}</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {COMMON} from '@/utils'
export default {
    props: {
        options: {}
    },
    data() {
        return {
            SELECT_DATA:[],
            formData:{
                infoType : '',
				startSendTimeStr : '',
				endSendTimeStr:'',
				startSendTime: '',
				endSendTime:'',
				information:''
            },
            disable:true,
            rules: {
					infoType : [
						{ required: true, message: this.$t('filter.noempty'), trigger: 'blur,change' }
					],
					information : [
                        { required: true, message: this.$t('filter.noempty'), trigger: 'blur,change' },
                        { min:1, max: 500, message: this.$filter.lanReplace(this.$t('filter.Length'),{min:1,max:500}) }
                    ],
                    startSendTimeStr : [
						{ type: 'date',required: true, message: this.$t('filter.noempty'), trigger: 'blur,change' }
					],
					endSendTimeStr : [
						{ type: 'date',required: true, message: this.$t('filter.noempty'), trigger: 'blur,change' }
					],
			},
            loading:false
        }
    },
    methods: {
         dateStartTimeChange(){
			this.formData.startSendTime=this.formData.startSendTimeStr==null?"":this.$filter.format(this.formData.startSendTimeStr,"yyyy-MM-dd HH:mm:ss");
		},
		dateEndTimeChange(){
			this.formData.endSendTime=this.formData.endSendTimeStr==null?"":this.$filter.format(this.formData.endSendTimeStr,"yyyy-MM-dd HH:mm:ss");
		},
        confirm() {
            this.$refs['modify'].validate(valid => {
                if (valid) {
                    let params = {
                        infoType: this.formData.infoType,
                        startSendTimeStr :this.formData.startSendTime, 
						endSendTimeStr :this.formData.endSendTime, 
                        information: this.formData.information,
                        id: this.options.modify.id
                    }
					console.log(params);

					if(!this.$filter.CompareDate(params.startSendTimeStr,params.endSendTimeStr)){
						this.$message.error({ message: this.$t("information.timeInvalidAlert") });
						return ;
					}
                    this.loading = true
                    this.$store.dispatch('updateInformation', params).then(data => {
                         this.loading = false
                     	if (!data.flag && !!data.errorCode){
						// this.$notify.error({message: this.$t("error."+data.errorCode)});
                        this.$message.error({ message: this.$t("error."+data.errorCode) });
						}else{
                            this.options.flag=false;
							this.$emit('confirm');
							// this.$notify.success(this.$t('action.modifySuccess'));
                            this.$message.success(this.$t('action.modifySuccess'));
                                   
						}
                    }).catch(error=>{
                    this.loading = false;
                   })
                }
            })
        },
        loadSelectData(){
				this.$store.dispatch('getAllInformationTypeList').then(data =>{
					if(data.flag && data.data.length!=0){
						this.SELECT_DATA=data.data;
                        for(var i=0;i<this.SELECT_DATA.length;i++){
                            this.SELECT_DATA[i].infotype+="";
                        }
					}else{
						this.SELECT_DATA =[];
					}
				});
		}

    },
    watch:{
      'options.flag'(newVal){
          if(!newVal){
              this.options.name = '';
          }
      }
     },
    mounted(){
        this.loadSelectData();
        this.formData.infoType = this.options.modify.infoType.toString();
        this.formData.startSendTimeStr = new Date(Date.parse(this.options.modify.startSendTimeStr.replace(/-/g, "/")));
        this.formData.endSendTimeStr = new Date(Date.parse(this.options.modify.endSendTimeStr.replace(/-/g, "/")));
        this.formData.information = this.options.modify.information.toString();
    },
   
}
</script>


<style lang="scss" scoped>


</style>