Vuetify：单击按钮时过滤 v-data-table 项

Question

我有一个 table 这样的，我希望当我点击 filter Button 所有项目时 male 和 valid 都是 true 待过滤。

users = [
    { name: 'ali', male: true, valid: true },
    { name: 'kevin', male: true, valid: false },
    { name: 'meri', male: false, valid: false }
  ]
  get headerst() {
    return [
      {
        text: 'user',
        align: 'start',

        value: 'name'
      },
      {
        text: 'male',
        value: 'male'
      },
      {
        text: 'valid',
        value: 'valid'
      }
    ]
  }
  filterOnlyCapsText(value, search, item) {
    return (
      value != null &&  typeof value === 'boolean' && value===true
    )
  }
  filter(){
  // i dont know
  }

<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<v-btn @click="filter">filter</v-btn>
    <v-data-table
     
      :headers="headerst"
      :items="users"
      item-key="name"
      class="elevation-1"
      :custom-filter="filterOnlyCapsText"
    >
 
 
    </v-data-table>

我已经写了代码，但它不起作用。

如何解决这个问题？？

这段文字只是为了避免堆栈错误这段文字只是为了避免堆栈错误这段文字只是为了避免堆栈错误这段文字只是为了避免堆栈错误

Answer 1

为此，您需要将过滤方法更新为 return 这个：

return value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().toLowerCase().indexOf(search.toLowerCase()) !== -1 && 
        item.male === true && 
        item.valid === true;

这意味着您可以从 item 读取 male 和 valid 属性进行匹配。此外，这一行 value.toString().toLowerCase().indexOf(search.toLowerCase()) !== -1 将确保搜索到的文本与值匹配。

此外，如果您想要一个可以单击的按钮并仅过滤那些男性和有效的按钮，那么您需要创建一个名为 filteredUsers 的计算属性，它看起来像这样：

filteredUsers(){
      if(this.onlyValidAndMale){
        return this.users.filter(user => user.male == true && user.valid == true)
      }
      
      return this.users;
    },

注意那里有这个 onlyValidAndMale 属性，你需要在 data().

中定义

有了它，您应该在 table.

中将 filteredUsers 用作 :items

您应该创建一个按钮，在单击时将此属性 onlyValidAndMale 切换为 true 和 false，它看起来像这样：

 <v-btn @click="onlyValidAndMale = !onlyValidAndMale">Click here to filter only those that are male and valid.</v-btn>

完整的工作示例在这里：

https://codepen.io/vokekaw624/pen/GROgJVP

HTML 文件：

<div id="app">
  <v-app id="inspire">
    <div>
      <v-data-table
        :headers="headers"
        :items="filteredUsers"
        item-key="name"
        class="elevation-1"
        :search="search"
        :custom-filter="filterOnlyMaleAndValid"
      >
        <template v-slot:top>
          <v-text-field
            v-model="search"
            label="Search (Will match only male = true and valid = true)"
            class="mx-4"
          ></v-text-field>
        </template>
      </v-data-table>
    </div>
        <v-btn @click="onlyValidAndMale = !onlyValidAndMale">Click here to filter only those that are male and valid.</v-btn>
  </v-app>
</div>

JS 文件：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      search: '',
      onlyValidAndMale: false,
      users: [
    { name: 'ali', male: true, valid: true },
    { name: 'muhamed', male: true, valid: true },
    { name: 'sami', male: true, valid: true },
    { name: 'kevin', male: true, valid: false },
    { name: 'meri', male: false, valid: false }
  ],
    }
  },
  computed: {
    filteredUsers(){
      if(this.onlyValidAndMale){
        return this.users.filter(user => user.male == true && user.valid == true)
      }
      
      return this.users;
    },
    headers () {
      return [
      {
        text: 'user',
        align: 'start',

        value: 'name'
      },
      {
        text: 'male',
        value: 'male'
      },
      {
        text: 'valid',
        value: 'valid'
      }
    ]
    },
  },
  methods: {
    filterOnlyMaleAndValid (value, search, item) {
      return value != null &&
        search != null &&
        typeof value === 'string' &&
        value.toString().toLowerCase().indexOf(search.toLowerCase()) !== -1 && 
        item.male === true && 
        item.valid === true;
    },
  },
})

请注意，我更新了过滤器方法的名称以更好地匹配它的功能，但它的工作方式与预期的一样。

Vuetify：单击按钮时过滤 v-data-table 项

Vuetify : filter v-data-table items when a button clicked

typescript

vue.js

nuxt.js

vuetify.js