데이터 테이블에서 "사용자 정의 필터" 프로펠러를 시각적으로 사용하는 방법또는 헤더로 필터링할 사용자 정의 필터를 만드는 방법

데이터 테이블에서 "사용자 정의 필터" 프로펠러를 시각적으로 사용하는 방법또는 헤더로 필터링할 사용자 정의 필터를 만드는 방법

게시일 현재 데이터 테이블에서 "사용자 정의 필터" 소품을 사용할 수 있는 문서를 찾을 수 없다.

머리글별로 데이터 테이블을 필터링하는 사용자 정의 필터를 생성하려는 경우드롭다운이 있는데 사용자가 드롭다운 옵션 중 하나를 클릭하면 특정 헤더에 대한 목록이 필터링된다.

예: 드롭다운 옵션:식품 종류: 과일, 고기, 야채

1. 박초 (채소)
2. 돼지고기(고기)
3. 닭 허벅지(고기)
4. 수박(과일)

내가 드롭 다운을 고기로 선택하면 돼지고기와 닭 허벅지만 보여줘야 해.

기투브에¹ 있는 코드를 보니, 마치 그 암호처럼 보인다.customFilterprop은 다음을 결정하는 데 사용되는 기본 방법을 덮어쓰는 데 사용된다.filter소품은 테이블의 품목에 적용된다.

기본값customFilter방법은 다음을 적용한다.filter각 항목 개체의 각 속성 이름에 대해 기능을 수행하고 필터를 통과한 하나의 속성 이름을 포함하지 않는 모든 항목을 필터링:

customFilter: {
  type: Function,
  default: (items, search, filter) => {
    search = search.toString().toLowerCase()
    return items.filter(i => (
      Object.keys(i).some(j => filter(i[j], search))
    ))
  }
},

필터에 열이 포함되지 않도록 하거나 항상 필터링되지 않도록 방지하려는 특정 행이 있는 경우 이 함수를 덮어쓸 수 있다.

그 방법 또한 그 방법에 달려 있다는 것을 눈치채게 될 것이다.search끈이 틀림없을 소품

---

그 말은, 네가 하고 싶은 일에 그 소품을 사용할 필요는 없다는 거야.드롭다운 값을 기준으로 항목을 필터링하고 해당 계산 속성을items받침대

예를 들면 다음과 같다.

new Vue({
  el: '#app',
  data() {
    return {
      food: [
        { name: 'Bakchoi', type: 'vegetable', calories: 100 },
        { name: 'Pork', type: 'meat', calories: 200 },
        { name: 'Chicken Thigh', type: 'meat', calories: 300 },
        { name: 'Watermelon', type: 'fruit', calories: 10 },
      ],
      headers: [
        { text: 'Name', align: 'left', value: 'name' },
        { text: 'Food Type', align: 'left', value: 'type' }, 
        { text: 'Calories', align: 'left', value: 'calories' },
      ],
      foodType: null,
    };
  },
  computed: {
    filteredItems() {
      return this.food.filter((i) => {
        return !this.foodType || (i.type === this.foodType);
      })
    }
  }
})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.15.2/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@0.15.2/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">

<div id="app">
  <v-app>  
    <v-select 
      label="Food Type" 
      :items="['vegetable', 'meat', 'fruit']"
      v-model="foodType"
    ></v-select>
    
    <v-data-table 
      :headers="headers"
      :items="filteredItems"
      hide-actions
    >
      <template slot="items" scope="{ item }">
        <td>{{ item.name }}</td>
        <td>{{ item.type }}</td>
        <td>{{ item.calories }}</td>
      </template>
    </v-data-table>
  </v-app>
</div>

---

1. 이 대답은 Vuetify가 v0.15.2에 있을 때 쓰여졌다.해당 버전에 있는 구성 요소의 소스 코드는 여기에서 찾을 수 있다.

당신은 또한 관습에 따라 갈 수도 있다.필터 접근 방식, 검색 범위를 유형 필드로 제한했다.

new Vue({
    el: '#app',
    data() {
        return {
            food: [
                { name: 'Bakchoi', type: 'vegetable', calories: 100 },
                { name: 'Pork', type: 'meat', calories: 200 },
                { name: 'Chicken Thigh', type: 'meat', calories: 300 },
                { name: 'Watermelon', type: 'fruit', calories: 10 },
            ],
            headers: [
                { text: 'Name', align: 'left', value: 'name' },
                { text: 'Food Type', align: 'left', value: 'type' },
                { text: 'Calories', align: 'left', value: 'calories' },
            ],
            search: '',

        };
    },
    methods: {
        customFilter(items, search, filter) {

            search = search.toString().toLowerCase()
            return items.filter(row => filter(row["type"], search));

        }
    }
})

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.15.2/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@0.15.2/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">

<div id="app">
    <v-app>
        <v-select
                label="Food Type"
                :items="['vegetable', 'meat', 'fruit']"
                v-model="search"
        ></v-select>

        <v-data-table
                :headers="headers"
                :items="food"
                :search="search"
                :custom-filter="customFilter"
                hide-actions
        >
            <template slot="items" scope="{ item }">
                <td>{{ item.name }}</td>
                <td>{{ item.type }}</td>
                <td>{{ item.calories }}</td>
            </template>
        </v-data-table>
    </v-app>
</div>

내 경우에는 검색창과 드롭다운 두 가지 필터링 방법이 있다.나는 사용하려고 노력했다.custom-filter두 사람 모두를 위해, 하지만 효과가 없어서, 다른 접근법을 생각해냈어.

<v-text-field v-model="search" label="Label"></v-text-field>
<v-select
    v-model="select"
    :items="food"
    item-text="type"
    item-value="type"
    :label="Types"
    @change="filterFoodUsingDropDown"
>
</v-select>
<v-data-table
    :search="search"
    :headers="headers"
    :items="food"
    :custom-filter="filterFoodUsingSearchbar"
>

data() {
    return {
        food: [
            { name: 'Bakchoi', type: 'vegetable', calories: 100 },
            { name: 'Pork', type: 'meat', calories: 200 },
            { name: 'Chicken Thigh', type: 'meat', calories: 300 },
            { name: 'Watermelon', type: 'fruit', calories: 10 },
        ],
        headers: [
            { text: 'Name', align: 'left', value: 'name' },
            { text: 'Food Type', align: 'left', value: 'type' },
            { text: 'Calories', align: 'left', value: 'calories' },
        ],
        search: '',
        select: '',
    };
},
methods: {
    filterFoodUsingSearchbar(items, search, filter) {
            // Condition
    }
        
    filterFoodUsingDropDown() {
        if (this.select !== '') {
            // In this case I use vuex to store the original data of the 
               food so that all the data is still exist even we filtered it out
            this.food = this.$store.state.food.filter((item) => item.type === this.select)
        }
    }

참조URL: https://stackoverflow.com/questions/45672145/how-do-i-use-custom-filter-prop-in-data-tables-in-vuetify-or-how-do-i-create