헤더에 필터 기능이 사용되는 경우 Vuetify 데이터 테이블에서 검색이 작동하지 않음

헤더에 필터 기능이 사용되는 경우 Vuetify 데이터 테이블에서 검색이 작동하지 않음

Vuetify v-data-table 구성 요소가 포함된 Vue 구성 요소가 있으며 이 구성 요소는 검색 기능과 함께 사용됩니다.<v-text-field>제가 안고 있는 문제는 이 시스템을filter데이터 테이블로 전달되는 헤더의 함수는 검색 기능이 작동하지 않도록 합니다.

데이터 테이블컴포넌트는body-prependslot : 테이블콘텐츠 필터링에 사용할 목록을 정의합니다.

 <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기능이 다른가요?아니면 제가 설정한 것처럼 작동해야 하나요?예를 들어, I dynamically additionally private를filter기능하다headers데이터 테이블 래퍼 컴포넌트 내의 어레이 아이템을 프로포트의 일부로 전달하는 것이 아니라

언급URL : https://stackoverflow.com/questions/63166225/search-does-not-work-in-vuetify-data-table-when-filter-function-used-in-headers