filters在vue项目中的使用

最新推荐文章于 2025-07-11 11:54:59 发布

而耳迩儿

最新推荐文章于 2025-07-11 11:54:59 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_65274248/article/details/128058396

这篇博客探讨了在Vue中如何利用filters方法对从接口获取的时间戳数据进行处理，将其转换为易读的天数，并在页面上显示。通过在el-table-column组件中使用模板插槽和filter函数，实现了数据的格式化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当对接口数据不再是简单的处理时，全部写在template中并不是最优解。这时候需要使用filters方法对数据进行处理。再在页面中使用。

<el-table-column label="失联时间" align="center" prop="lostTime" width="180" sortable>
        <template slot-scope="scope">
          已有<span style="color: red;">{{ scope.row.followTime | lostTime }}</span>天未联系该客户
        </template>
      </el-table-column>


    filters: {
      //将接口获取的时间戳进行处理，并转换成天数应用于页面
      lostTime: function (number) {
        const diff = new Date().getTime() - number
        return Math.floor(diff / (24 * 3600 * 1000));
      }
    },