这里用到的标签是Element里的Tag 标签,利用Tag标签的type属性 不同状态下可以显示不同的类型,
getStatus(begintime,endtime)里的两个值
begintime是后台返回来的开始时间
endtime是后台返回来的结束时间
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 类型 | string | success/info/warning/danger | — |
<template slot-scope="scope">
<el-tag effect="dark" :type="getStatus(begintime, endtime) === '正在比赛' ? 'danger' : getStatus(begintime,endtime) === '未开始' ? 'success' : 'info'" disable-transitions>{{ getStatus(begintime,endtime) }}</el-tag>
</template>
getStatus(begintime, endtime) {
//拿到当前的时间并转换成时间戳的格式.getTime()方法获取以毫秒为单位的时间
var time = new Date().getTime();
var btime = new Date(begintime).getTime();
var etime = new Date(endtime).getTime();
if (btime > etime) {
return "时间错误";
}
if (btime > time && etime > time) {
return "未开始";
} else if (time > btime && time < etime) {
return "正在比赛";
} else if (etime < time) {
return "已结束";
}
}