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

最新推荐文章于 2024-01-29 02:26:40 发布

otatoz

最新推荐文章于 2024-01-29 02:26:40 发布

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_42720683/article/details/104517459

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

使用前：

<div v-for='item in orders' :key='item.id'>
    日期：<div>{{item.orderTime}}</div>
    状态：<div>{{item.status}}</div>
    <br>
</div>

使用前页面效果：

使用后代码：

<div v-for='item in orders' :key='item.id'>
    日期：<div>{{item.orderTime | dateFormat}}</div>
    状态：<div>{{item.status}}</div>
    <br>
</div>

全局注册过滤器

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

使用后页面效果：

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

使用前代码：

<el-table
    :data="orders"
    style="width: 100%">
    <el-table-column
        prop="orderTime"
        label="日期">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
    </el-table-column>
    <el-table-column
        prop="total"
        label="总额">
    </el-table-column>
</el-table>

使用前页面效果：

使用后代码：

<el-table
    :data="orders"
    style="width: 100%">
    <el-table-column
        prop="orderTime"
        :formatter="dateFormat"
        label="日期">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
    </el-table-column>
    <el-table-column
        prop="total"
        label="总额">
    </el-table-column>
</el-table>

当前组件的methods中

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

使用后页面效果：