Vue2中VueGoodTable筛选下拉选项无法正常渲染求助

核心问题：缺少筛选类型配置 #

你当前的配置未指定筛选器类型，VueGoodTable默认使用文本输入框，因此即便设置了filterDropdownItems也不会显示下拉菜单。必须在filterOptions中添加filterType: 'select'。

修复静态赋值的情况 #

修改columns配置，添加筛选类型：

columns: [
  {
    label: 'some column',
    field: 'column1'
  },
  {
    label: 'Customer',
    field: 'customerName',
    filterOptions: {
      enabled: true,
      placeholder: 'All',
      filterType: 'select', // 关键配置：指定为下拉选择器
      filterDropdownItems: [
        // 静态示例数据
        { value: '1', text: '客户A' },
        { value: '2', text: '客户B' }
      ]
    }
  },
  {
    label: 'other columns',
    field: 'column234'
  }
]

解决API加载动态数据的响应式问题 #

初始化columns时this.customers为空数组，且Vue不会自动追踪数组内部对象属性的引用更新，可通过以下两种方式解决：

方式1：将columns设为计算属性

利用计算属性的响应式特性，每次this.customers更新时自动重新生成columns：

data() {
  return {
    customers: [],
    // 其他数据...
  }
},
computed: {
  columns() {
    return [
      {
        label: 'some column',
        field: 'column1'
      },
      {
        label: 'Customer',
        field: 'customerName',
        filterOptions: {
          enabled: true,
          placeholder: 'All',
          filterType: 'select',
          filterDropdownItems: this.customers
        }
      },
      {
        label: 'other columns',
        field: 'column234'
      }
    ]
  }
},
methods: {
  // 你的load和getTableOptions方法保持不变
}

方式2：获取数据后手动更新columns

若不想使用计算属性，可在API请求完成后，找到对应列并更新filterDropdownItems：

data() {
  return {
    customers: [],
    columns: [
      {
        label: 'some column',
        field: 'column1'
      },
      {
        label: 'Customer',
        field: 'customerName',
        filterOptions: {
          enabled: true,
          placeholder: 'All',
          filterType: 'select',
          filterDropdownItems: []
        }
      },
      {
        label: 'other columns',
        field: 'column234'
      }
    ],
    // 其他数据...
  }
},
methods: {
  async getTableOptions() {
    try {
      const response = await axios.get(APICallUrl)
      this.customers = response.data.customers.map(item => ({
        value: item.customerId,
        text: item.customerName
      }))
      // 更新对应列的下拉选项
      const customerColumn = this.columns.find(col => col.field === 'customerName')
      if (customerColumn) {
        customerColumn.filterOptions.filterDropdownItems = this.customers
        // 触发Vue响应式更新（直接修改对象属性不生效时使用）
        this.columns = [...this.columns]
      }
    } catch (e) {
      console.log('e', e)
    }
  }
}

额外注意点 #

• 确保filterDropdownItems格式正确：每个元素需包含value和text字段，若需自定义字段名，可通过optionText和optionValue配置指定。
• 若使用remote模式，需确保on-column-filter事件能正确接收筛选值并发起对应API请求。

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