Question

我想知道如何在将道具传递给组件时使用过滤器。我使用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>

正如你所看到的，我正试图在这个道具上使用我的过滤器：

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

使用| moment似乎不起作用，我还可以使用哪种方法将此过滤器应用于道具？

由于

Answer 1

据我所知，你现在将你的道具作为一个字符串传递。您应该使用:prop="created_at | moment"。

Answer 2

由于elment-ui仅使用prop值作为字段名称而不是绑定它的值，因此我们不能直接使用过滤器。我通过格式化程序找到了实现此目的的方法，以下是代码段。

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

在Vue.js的道具中使用过滤器

2 个答案: