VueGoodTable 过滤器下拉选项 vue2答案

【问题标题】：VueGoodTable filter dropdown options vue2VueGoodTable 过滤器下拉选项 vue2
【发布时间】：2023-01-14 12:16:31
【问题描述】：

我正在尝试在 vue good table 上填充可能的下拉选项。这个想法是我对服务器进行 API 调用以带回可能进入下拉列表的值，并且我试图将其分配给列过滤器。但是，我似乎无法让它工作。

  <vue-good-table
    :paginationOptions="paginationOptions"
    :sort-options="sortOptions"
    :isLoading.sync="isTableLoading"
    :rows="rows"
    :columns="columns"
    :lineNumbers="true"
    mode="remote"
    :totalRows="totalRecords"
    @on-row-click="onRowClick"
    @on-page-change="onPageChange"
    @on-sort-change="onSortChange"
    @on-column-filter="onColumnFilter"
    @on-per-page-change="onPerPageChange"
    @on-search="onSearch"
    :search-options="{
        enabled: true
      }"
    styleClass="vgt-table striped bordered"
    ref="table"
  >

相当标准的 vgt 设置。

  columns: [
    {
      label: 'some column',
      field: 'column1'
    },
    {
      label: 'Customer',
      field: 'customerName',
      filterOptions: {
        enabled: true,
        placeholder: 'All',
        filterDropdownItems: Object.values(this.customers)
      }
    },
    {
      label: 'other columns',
      field: 'column234'
    }
]

和 API 调用

methods: {
   async load () {
      await this.getTableOptions()
    },

  async getTableOptions () {
  try {
    var response = await axios.get(APICallUrl)

    this.customers= []
    for (var i = 0; i < response.data.customers.length; i++) {
      this.customers.push({ value: response.data.customers[i].customerId, text: response.data.customers[i].customerName})
    }
  } catch (e) {
    console.log('e', e)
  }
}

我唯一想到的是在加载方法完成之前表格已经完成渲染。但是，仅在我的数据中创建一个静态对象并将其分配给 filterDropDownItems 并没有产生更好的结果。每当我尝试将其设置为一个对象时，结果是该框是一个输入框而不是下拉框。

【问题讨论】：

标签： javascript vue.js vue-good-table

【解决方案1】：

通过将 columns 设为计算属性，您可以在表格呈现后进行更新。您遇到的另一个问题是this.customers 是一个数组，但Object.values() 需要一个对象。您可以改用 Array.map 函数

this.customers.map(c => c.value)

虽然根据VueGoodTable docs，像你这样的对象数组应该可以正常工作

computed: {
  columns() {
    return [
      {
        label: 'some column',
        field: 'column1'
      },
      {
        label: 'Customer',
        field: 'customerName',
        filterOptions: {
          enabled: true,
          placeholder: 'All',
          filterDropdownItems: this.customers
        }
      },
      {
        label: 'other columns',
        field: 'column234'
      }
    ];
  }
}

【讨论】：