vue-tables-2自定义过滤器事件未注册，Event.$emit触发报错

Let's break down what's going wrong and how to fix this issue:

1. The Core Mistake: Wrong Event Emitter Method #

You’re using Event.$emit but vue-tables-2’s built-in Event object uses a plain emit method (not Vue’s $emit). That’s exactly why you’re getting the "not a function" error.

Quick Fix for the Event Bus Approach #

If you want to stick with triggering filters via events, update your code to use the correct method:

// Replace Event.$emit with Event.emit
Event.emit('vue-tables.rmTable.filter::materialtype', yourFilterValue);

Make sure you’ve imported the Event object correctly (either in main.js or your component):

import { Event } from 'vue-tables-2';

2. A More Reliable Option: Use Table Refs Directly #

For multi-table setups, accessing the table instance via a ref is often cleaner and avoids event bus confusion. Here’s how to implement it:

Step 1: Add a ref to Your Table #

Update your template to include a ref attribute (match it to your table name for clarity):

<v-client-table 
  ref="rmTable"
  name="rmTable" 
  :data="filteredRMInvData" 
  :columns="rmColumns" 
  :options="rmOptions" 
  v-if="rmInventoryData.length"
>
</v-client-table>

Step 2: Trigger Filter via the Table Instance #

In your listener, call the table’s built-in filter method directly instead of using the event bus:

// Ensure the table is rendered first (thanks to your v-if condition)
if (this.$refs.rmTable) {
  this.$refs.rmTable.filter('materialtype', yourFilterValue);
}

This skips the event bus entirely and targets exactly the table you want, which is less error-prone when dealing with multiple tables on one page.

3. Quick Configuration Checks #

Just to rule out other potential issues:

• Make sure filterable: true is set in your rmOptions (either globally or for this specific table)
• Confirm the materialtype column is marked as filterable if you’ve set column-specific filter rules

4. Handle Timing Issues (If Needed) #

Since you’re using v-if="rmInventoryData.length", the table only renders when data is available. If your listener fires before the table mounts, wrap your filter call in $nextTick to ensure the table exists:

this.$nextTick(() => {
  if (this.$refs.rmTable) {
    this.$refs.rmTable.filter('materialtype', yourFilterValue);
  }
});

内容的提问来源于stack exchange，提问作者Kay Singian