Vuetifyデータテーブルカスタムフィルタを作成する

カスタムフィルタの小道具を使用して新しいフィルタを追加するにはどうすればよいですか？私はドキュメントを見つけることができなかったためVuetifyデータテーブルカスタムフィルタを作成する

ここにこれを置く

data() { 
     return { 
      headers: [ 
       { text: 'Name', value: 'name' }, 
       { text: 'Animal', value: 'animal' }, 
       { text: 'Job', value: 'job' }, 
       { text: 'Age', value: 'age' }, 
      ], 
      items: [ 
       { name: 'Frozen Yogurt', animal: 'Chicken', job: 'Electrician', age: 24 }, 
       { name: 'Eclair', animal: 'Cow', job: 'IT Consultant', age:45 }, 
       { name: 'Cupcake', animal: 'Cow', job: 'Unemployed', age:26 }, 
       { name: 'Gingerbread', animal: 'Chicken', job: 'Unemployed', age:38 }, 
       { name: 'Jelly bean', animal: 'Cow', job: 'Fraud Specalist', age:52 }, 
       { name: 'Lollipop', animal: 'Sheep', job: 'Unemployed', age:18 }, 
       { name: 'Honeycomb', animal: 'Sheep', job: 'Plumber', age:32 }, 
       { name: 'Donut', animal: 'Chicken', job: 'Unemployed', age:22 }, 
       { name: 'KitKat', animal: 'Sheep', job: 'Gym Junkie', age:41 }, 
      ] 
     } 
    },

出典

2017-09-12 Soth

：このデータを使用して、私はすべての「無職鶏」を見つけて、すべての特殊文字とスペースを削除したいと思います。スペースを使用して複数のフィールドを検索できるように、検索をカスタムフィルタに変更しました。そのようにすれば、下のコードを使って "失業したチキン"を検索して結果を得ることができます。

new Vue({ 
 
     el: '#app', 
 
     data() { 
 
      return { 
 
       search: '', 
 
       headers: [ 
 
        { text: 'Name', value: 'name' }, 
 
        { text: 'Animal', value: 'animal' }, 
 
        { text: 'Job', value: 'job' }, 
 
        { text: 'Age', value: 'age' }, 
 
       ], 
 
       items: [ 
 
        { name: 'Frozen Yogurt', animal: 'Chicken', job: 'Electrician', age: 24 }, 
 
        { name: 'Eclair', animal: 'Cow', job: 'IT Consultant', age:45 }, 
 
        { name: 'Cupcake', animal: 'Cow', job: 'Unemployed', age:26 }, 
 
        { name: 'Gingerbread', animal: 'Chicken', job: 'Unemployed', age:38 }, 
 
        { name: 'Jelly bean', animal: 'Cow', job: 'Fraud Specalist', age:52 }, 
 
        { name: 'Lollipop', animal: 'Sheep', job: 'Unemployed', age:18 }, 
 
        { name: 'Honeycomb', animal: 'Sheep', job: 'Plumber', age:32 }, 
 
        { name: 'Donut', animal: 'Chicken', job: 'Unemployed', age:22 }, 
 
        { name: 'KitKat', animal: 'Sheep', job: 'Gym Junkie', age:41 }, 
 
       ] 
 
      } 
 
     }, 
 
     methods: { 
 
      customFilter(items, search, filter) { 
 
       //this custom filter will do a multi-match separated by a space. 
 
       //e.g 
 

 
       if (!search) { return items } //if the search is empty just return all the items 
 

 
       function new_filter (val, search) { 
 
        return val !== null && 
 
         ['undefined', 'boolean'].indexOf(typeof val) === -1 && 
 
         val.toString().toLowerCase().replace(/[^0-9a-zA-Z]+/g,"").indexOf(search) !== -1 
 
       } 
 

 
       let needleAry = search.toString().toLowerCase().split(" ").filter(x => x); 
 
       //whenever we encounter a space in our search we will filter for both the first and second word (or third word) 
 

 
       return items.filter(row => needleAry.every(needle => Object.keys(row).some(key => new_filter(row[key],needle)))); 
 
       //foreach needle in our array cycle through the data (row[key]) in the current row looking for a match. 
 
       // .some will return true and exit the loop if it finds one it will return false if it doesnt 
 
       // .every will exit the loop if we dont find a match but will return true if all needles match 
 
       // .filter the rows on each match 
 

 

 
      } 
 
     } 
 

 
    })

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

 

 
</head> 
 
<body> 
 
<div id="app"> 
 
    <v-app id="inspire"> 
 
     <v-card> 
 
      <v-card-title> 
 
       Animals in the workforce 
 
       <v-spacer></v-spacer> 
 
       <v-text-field 
 
         append-icon="search" 
 
         label="Search" 
 
         single-line 
 
         hide-details 
 
         v-model="search" 
 
       ></v-text-field> 
 
      </v-card-title> 
 
      <v-data-table 
 
        hide-actions 
 
        :headers="headers" 
 
        :items="items" 
 
        :search="search" 
 
        :custom-filter="customFilter" 
 
      > 
 
       <template slot="items" scope="props"> 
 
        <td class="text-xs-right">{{ props.item.name }}</td> 
 
        <td class="text-xs-right">{{ props.item.animal }}</td> 
 
        <td class="text-xs-right">{{ props.item.job }}</td> 
 
        <td class="text-xs-right">{{ props.item.age }}</td> 
 
       </template> 
 
      </v-data-table> 
 
     </v-card> 
 
    </v-app> 
 
</div> 
 
</body> 
 
</html>

出典

2017-09-12 03:08:48 Soth

Vuetifyデータテーブルカスタムフィルタを作成する

答えて

関連する問題