Vue Good Table中filterDropdownItems返回值异常问题求助

I’ve looked into the issue where selecting "Active" in your filter dropdown is incorrectly displaying inactive entries. This is almost always due to a mismatch between your dropdown values and the actual data field type, or inverted custom filter logic. Here’s how to resolve it:

1. Check for Data Type Mismatch #

First, confirm the type of your status field in your row data. For example:

• If your rows use boolean values like status: true/false for active/inactive
• But your dropdown uses string values ('active'/'inactive')

Vue Good Table’s default filter relies on exact matches, so a string 'active' won’t match a boolean true—this can lead to unexpected behavior like showing all data, or the opposite set if your logic is flipped.

Quick Fix: Align Dropdown Values with Data Type #

If your status is a boolean, update your filterDropdownItems to use matching boolean values:

filterDropdownItems: [ 
  {'value': true, 'text': 'Active'}, 
  {'value': false, 'text': 'Inactive'} 
]

This lets the default filter work correctly without extra code.

2. Use a Custom Filter Function (If You Need String Values) #

If you must keep string values in your dropdown (e.g., for consistency with other parts of your app), add a customFilter to your column definition to map the dropdown selection to your data’s actual status:

columns: [
  {
    label: 'Status',
    field: 'status',
    filterDropdownItems: [ 
      {'value': 'active', 'text': 'Active'}, 
      {'value': 'inactive', 'text': 'Inactive'} 
    ],
    customFilter: (selectedValue, row) => {
      // Map dropdown string to your data's status value
      if (selectedValue === 'active') {
        return row.status === true; // Adjust to match your data's active value
      } else if (selectedValue === 'inactive') {
        return row.status === false; // Adjust to match your data's inactive value
      }
      return true; // Show all rows if no filter is selected
    }
  },
  // Other columns...
]

Double-check this logic—if you accidentally wrote row.status === false for the "active" case, that’s exactly why you’d see inactive entries when selecting Active.

3. Verify Your Data Structure #

Make sure your row data actually has the status field set correctly. For example, if some rows use string values like status: 'inactive' instead of booleans, adjust your custom filter to match:

customFilter: (selectedValue, row) => {
  return row.status === selectedValue;
}

This works if your data’s status strings exactly match the dropdown values.

内容的提问来源于stack exchange，提问作者231412 412389421