Vue.js中如何在传递Prop时使用过滤器（Element UI场景）

Hey there! I get that you want to apply a filter (like your moment date formatter) to data displayed in an Element UI table column, but tried using the filter syntax directly in the prop attribute and it didn't work. Let's fix that—here are two reliable approaches to get this done:

1. Use a Column Slot to Customize Content #

The simplest way to apply a filter to your table column is to use Element UI's column slot feature. This lets you manually render the column content, where you can use Vue's filter syntax as usual.

Here's how to modify your component:

<template>
  <div>
    <el-table :data="failures" style="width: 100%">
      <el-table-column label="Date" width="180">
        <!-- Use the default slot to access the row data -->
        <template #default="scope">
          {{ scope.row.created_at | moment }}
        </template>
      </el-table-column>
      <!-- Add other columns as needed -->
    </el-table>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props: ['failures'],
  filters: {
    moment(date) {
      // Your date formatting logic here, e.g.:
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    }
  }
};
</script>

Why this works: The slot gives you direct access to the row data via scope.row, so you can apply the filter directly in the template interpolation—just like you would with regular Vue templates.

2. Preprocess Data with a Computed Property #

If you prefer to handle data formatting before it reaches the table, you can create a computed property that transforms the failures prop with your filter logic. This is great if you need the formatted data in multiple places.

Check out this example:

<template>
  <div>
    <el-table :data="formattedFailures" style="width: 100%">
      <!-- Now you can use the pre-formatted field directly in prop -->
      <el-table-column prop="formattedCreatedAt" label="Date" width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from 'moment';

export default {
  props: ['failures'],
  computed: {
    formattedFailures() {
      return this.failures.map(failure => ({
        ...failure,
        formattedCreatedAt: moment(failure.created_at).format('YYYY-MM-DD HH:mm:ss')
      }));
    }
  }
};
</script>

This approach avoids using filters entirely by precomputing the formatted value. The table can then reference the new formattedCreatedAt field directly via the prop attribute.

Why Your Original Syntax Didn't Work #

Just to clarify: Element UI's prop attribute expects a string that matches a key in your table data object. It doesn't parse Vue's filter syntax (| moment) because it's not a template interpolation or v-bind expression—it's just a field name identifier. That's why the direct approach didn't work for you.

内容的提问来源于stack exchange，提问作者Nick Maddren