vue el-table过滤器使用及数据格式化

最新推荐文章于 2025-05-22 17:22:26 发布

原创最新推荐文章于 2025-05-22 17:22:26 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端资料专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用Vue框架展示视频数据的方法，包括视频名称、播放时间、总时间和观看百分比。通过自定义过滤器实现了数值的精确显示，并使用表格组件进行数据呈现。

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

页面显示内容
<template>
  <div class="all">

      <el-button type="warning" icon="el-icon-refresh-left" class="reset-button" @click="resetBack();">返回</el-button>

    <el-table :data="pagination" border>
      <el-table-column prop="videoName" label="视频名称" width="500"></el-table-column>
      <el-table-column prop="playTime" label="播放时间(单位:秒)" width="300" >
        <template slot-scope="scope">
          <span>{{scope.row.playTime | rounding}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="playTotal" label="总时间(单位:秒)" width="300">
        <template slot-scope="scope">
          <span>{{scope.row.playTotal | rounding}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="bili" label="观看百分比" width="300" :formatter="dataFormat"></el-table-column>

    </el-table>
  </div>
</template>
==============================================================================
在 methods: {}中定义过滤器
   filters: {
      'rounding': function (value2) {

        var aa=parseFloat(value2).toFixed(2);
        return aa
      }
    }
 在 methods: {}中定义格式化的字符
     dataFormat(row, column) {
          var playTime =row.playTime;
          var playTotal =row.playTotal;
          var bili=(playTime/playTotal)*100
        bili=bili.toFixed(2);
          return bili+"%";

      },