Question

我有一个Vue组件，其中包含Vuetify v-data-table组件。并且它结合使用search功能和<v-text-field>。我遇到的问题是，在作为道具传递到数据表的标头中使用filter函数会阻止搜索功能正常工作。

数据表组件使用body-prepend插槽定义用于过滤表内容的选择列表。

 <v-data-table
      show-expand
      :headers="headers"
      :items="items"
      :search="search"
      item-key="sow"
      hide-default-footer
      dense
      disable-pagination
    >
      <template v-slot:top>
        <v-toolbar flat color="white">
          <v-toolbar-title>{{ title }}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-text-field
            v-model="search"
            prepend-icon="search"
            label="Search"
            single-line
            hide-details
            clearable
          ></v-text-field>
        </v-toolbar>
      </template>
      <template v-slot:body.prepend>
        <tr>
          <td :colspan="7"></td>
          <td v-if="showStatusFilter">
            <v-select
              v-model="selectedStatuses"
              :items="statuses"
              :menu-props="{ maxHeight: '400' }"
              label="Select Status"
              multiple
              chips
              deletable-chips
              small-chips
              dense
            ></v-select>
          </td>
          <td v-if="showPracticeFilter">
            <v-select
              v-model="selectedPractices"
              :items="practices"
              label="Select Practice"
              multiple
              chips
              deletable-chips
              small-chips
              dense
            ></v-select>
          </td>
          <td v-if="showSEFilter">
            <v-select
              v-model="selectedSEs"
              :items="ses"
              label="Select SE"
              multiple
              chips
              deletable-chips
              small-chips
              dense
            ></v-select>
          </td>
        </tr>
      </template>
    </v-data-table>

然后将标头从父组件传递到组件中

headers: [
  { text: 'SOW', align: 'left', value: 'sow' },
  { text: 'Firm', value: 'firm' },
  { text: 'Category', value: 'category' },
  { text: '% Complete', value: 'percentComplete' },
  { text: 'Estimated Completion', value: 'estimatedCompletionDate' },
  { text: 'Amount', value: 'amount' },
  {
    text: 'Status',
    value: 'status',
    filter: (f) => {
      if (this.getSelectedStatuses.length === 0) return true
        return this.getSelectedStatuses.indexOf(f + '') !== -1
      }
    },
    {
      text: 'Practice',
      value: 'practice'
      filter: (f) => {
        if (this.getSelectedPractices.length === 0) return true
          return this.getSelectedPractices.indexOf(f + '') !== -1
        }
      },
  { text: 'Modified', value: 'modified' },
  { text: 'Actions', value: 'actions' }
],

Vuex用于存储过滤后的值，以便可以在数据表组件的各种实现中使用过滤器。

像这样实现，search字段无声地消失了。但是，一旦我从filter数组对象中删除了headers函数，它就可以正常工作。我是否需要以不同的方式实现filter函数？还是应该像我设置的那样工作？例如，是否需要将filter函数动态添加到数据表包装器组件中的headers数组项中，而不是将它作为prop的一部分传递进来？

当标头中使用过滤器功能时，搜索在Vuetify数据表中不起作用

0 个答案: