在element-ui的table组件与双大括号中使用时间处理函数

需求1：在双大括号中处理时间格式

使用前：

    日期：
{{item.orderTime}}
    状态：
{{item.status}}
    

使用前页面效果：

使用后代码：

    日期：
{{item.orderTime | dateFormat}}
    状态：
{{item.status}}
    

全局注册过滤器

Vue.filter('dateFormat',function(dateStr){
    return moment(dateStr).format('YYYY-MM-DD');
})

使用后页面效果：

 

---

---

需求2：在element-ui的table组件中处理时间格式

使用前代码：

使用前页面效果：

使用后代码：

当前组件的methods中

methods:{
    dateFormat(row,colnum){
        // colnum为使用了formatter的列
        // clonum.property为当前列的prop值
        // row为当前行，是一个类数组对象，可通过[]拿值
        return moment(row[colnum.property]).format('YYYY-MM-DD')
    },
}

使用后页面效果：

 

说明：在element-ui的table组件中，自带属性formatter，用来格式化内容