ElementUI组件中，给未截止日期高亮显示

案例背景

表格中，有一列为截止日期，每一行都有很多列，需要将没有截止的日期高亮或者换种颜色显示

思路分析

首先要拿到该行中的日期，然后将它与当前日期作比较，若当前日期减去截止日期 小于 0，则代表未截止日期，并将颜色属性和属性值返回给标签，用 style 动态绑定。注意：日期包括年月日时分秒，相减时要将两个日期都转换成时间戳。

注意

在 Elementui 框架中，要动态修改标签的属性，不能直接绑定在该标签，需要使用模板，且模板在渲染中是不会占位的

代码实现

<el-table-column prop="signTimeStr" label="报名截止时间" width="170" >
     <template v-slot="{row}">
          <span :style="notEndTime(row.signTimeStr)">{{row.signTimeStr}}</span>
     </template>
</el-table-column>

methods 中定义该方法

// 未截止日期高亮显示 
        notEndTime(signTimeStr) {
            let a = new Date();  // 当前日期时间
            let aTime = a.getTime();
            let sTime = new Date(signTimeStr).getTime();  // 截止日期时间
            if ((aTime - sTime) < 0) {
                return {color: '#ff9517'};
            }
        },