vue element-ui 表格中修改文字颜色/格式化日期

需求：

1. 根据后台返回的状态码来判断并且修改返回值的颜色
2. 后台返回的时间戳格式化为：年--月--日--时--分--秒或者年--月--日

需求一：

第一种方法

<el-table-column
   prop="status"
   label="订单状态"
   width="80">
   <template slot-scope="scope">
     <span v-if="scope.row.status==='0'" style="color: red">{{ formatOrderState(scope.row.status) }}</span>
     <span v-else-if="scope.row.status==='2' " style="color: #019A92">{{ formatOrderState(scope.row.status) }}</span>
     <span v-else style="color: #606266">{{ formatOrderState(scope.row.status) }}</span>
   </template>
 </el-table-column>

第二种方法

<el-table-column
    prop="status"
    label="订单状态"
    width="80">
    <template slot-scope="scope">
       <span v-if="scope.row.status==='0'" style="color: red">{{ formatOrderState(scope.row.status) }}</span>
       <span v-if="scope.row.status==='2' || scope.row.status==='3'" style="color: #019A92">{{ formatOrderState(scope.row.status) }}</span>
       <span v-if="scope.row.status !=='0' && scope.row.status !=='2' && scope.row.status !=='3'" style="color: #606266">{{ formatOrderState(scope.row.status) }}</span>
    </template>
 </el-table-column>

需求二：

步骤：
1. 在src目录下新建文件用来写封装方法
2. 在刚新建的文件中引入进来
import { formatDate } from 'element-ui/src/utils/date-util'

// 格式化时间
export function dateFormat (date, format) {
  return formatDate(date, format)
}

<template>
  <el-table-column
    prop="Ordered_Date"
    label="下单时间"
    width="140">
  <template slot-scope="scope">
    // 关键在于添加"yyyy-MM-dd HH:mm:ss"后，下单时间那里格式化后显示出来 时-分-秒
   // 如果你只想显示 时-分，那添加"yyyy-MM-dd HH:mm"，同理一样的操作方式
     {{formatDate(scope.row.CreationTime,"yyyy-MM-dd HH:mm:ss") }} 
 </template>
</el-table-column>

methods:{
  // 当前使用页面引入进来
  // 格式化时间
  formatDate (date, format) {
     return dateFormat(date, format)
   }
}