:rules="dataRule"定义在el-form中
还需要在el-form-item定义属性 prop="date"
data中规则
dataRule: { date: [ { required: true, message: "请选择时间", trigger: "change", type: "array", }, ], },
框架
<el-form-item label="请假时间:" label-width="150px" size="medium" style="width: 490px;align='right'" prop="date" > <el-date-picker v-model="leaveTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" > </el-date-picker> </el-form-item> <el-form-item label="请假时长" prop="totalTime"> <el-input v-model="getTim" :disabled="true" placeholder="请假时长,单位秒" ></el-input> </el-form-item>
data
form: { totalTime: "", }, startTime: "", endTime: "",leaveTime: [],
computed这个方法会在mounted之前调用一次在之后运行又会调用
computed: { getTim: function () { let startTime; let endTime; console.log("isNull???"); if (isNull(this.leaveTime)) { startTime = new Date(); endTime = new Date(); console.log("isNull"); } else { startTime = isNull(this.leaveTime[0]) ? new Date() : this.leaveTime[0]; endTime = isNull(this.leaveTime[1]) ? new Date() : this.leaveTime[1]; console.log(getTime(startTime, endTime)); console.log("computed"); } return getTime(startTime, endTime); }, },
引入的定义方法
import { getTime } from "@/utils/dateUtils"; import { isNull } from "@/utils/validate";
dateUtils
/** * 计算两个时间的差值 */ export function getTime(beginTime, endTime) { console.log("进入了自定义getTime") var dateDiff = endTime.getTime() - beginTime.getTime();//时间差的毫秒数 console.log("自定义getTime的开始时间:", endTime.getTime()) console.log("自定义getTime的结束时间:", beginTime.getTime()) console.log("自定义getTime的dateDiff", dateDiff) var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数 var leave1 = dateDiff % (24 * 3600 * 1000) //计算天数后剩余的毫秒数 var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数 //计算相差分钟数 var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数 var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数 //计算相差秒数 var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数 var seconds = Math.round(leave3 / 1000) console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒") // return "相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟"; //这里要天数 return "相差 " + dayDiff + "天 "; }
validate
export function isNull(str) { if (str === null || str === undefined || str.length === 0) { return true } return false }