时间戳

首页 > 解决方案 > 使用元素ui时如何将计算值放入表格道具中

javascript - 使用元素ui时如何将计算值放入表格道具中

问题描述

我在前端使用 vuejs 和 element ui。我想呈现一个日期为 unix 格式的表格。我正在使用moment.js以可读格式显示日期。

我在使用表格道具中的时刻 js 时遇到问题。它不渲染任何东西。

这是我的表格示例代码。

    <el-table
            :data="data"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="Name"
              width="180"
            />
            <el-table-column
              prop="address"
              label="address"
              width="180"
            />
            <el-table-column
              prop="email"
              label="Email"
            />
            <el-table-column
              prop="moment(due)"
              label="Last Activity"
            />
    </el-table>

如果我删除时刻 js 函数调用，它会以 unix 格式显示日期，我需要它以人类可读格式呈现日期

标签： javascriptvue.jselement-ui

解决方案

首先，prop 应该代表表数据中的日期键。然后，您可以在要添加您的时刻的表格列中创建一个模板槽。我不知道您是如何获取表格数据的，但无论如何它应该可以工作。

 <el-table-column prop="created_at" label="Joined">
   <template slot-scope="props">
     {{ props.row.created_at | moment("MMMM Do YYYY") }}
   </template>
 </el-table-column>

推荐阅读