javascript - 在 Vue.js 的 props 中使用过滤器

Question

我想知道如何在将 prop 传递给组件时使用过滤器。我正在使用 Element UI toolkit这是我的基本组件的示例:

<template>
 <div>
   <el-table
      :data="failures"
      style="width: 100%">
      <el-table-column
        prop="created_at | moment"
        label="Date"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
    import moment from 'moment';
    export default {
      props: ['failures'],
      filters: {
        moment: function (date) {
          return moment(date).fromNow();
        }
      },
      mounted() {

      }
    }
</script>

如您所见，我正在尝试在此 Prop 上使用我的过滤器:

<el-table-column
   prop="created_at | moment"
   label="Date"
   width="180">
</el-table-column>

使用| moment 似乎不起作用，我可以使用其他什么方法将此过滤器应用于 Prop ？

谢谢

Answer 1

由于 elment-ui 只是使用 prop 的值作为字段名，而不是绑定(bind)它的值，所以我们不能直接使用 filter。我通过 formatter 找到了实现此目的的方法，以下是代码片段。

<template>
    <div>
        <el-table :data="failures" style="width: 100%">
            <el-table-column :formatter='formatter' label="Date" width="180">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    props: ['failures'],
    methods: {
        formatter(row) {
            return moment(row.created_at).fromNow()
        },
    }
};
</script>