使用元素 ui 时如何将计算值放入 table 道具

Question

我在前端使用 vuejs 和元素 ui。我想呈现一个具有 unix 格式日期的 table。我正在使用 moment.js 以可读格式显示日期。

我在 table 道具中使用 moment js 时遇到问题。它不渲染任何东西。

这是我的示例代码 table。

    <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>

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

Answer 1

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

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

使用元素 ui 时如何将计算值放入 table 道具

How do I put a computed value in a table prop when using element ui

javascript

vue.js

element-ui