当用户键入输入栏时通过表格过滤

Posted 2023-02-22

【中文标题】当用户键入输入栏时通过表格过滤

【英文标题】：Filtering through a table as user types to input bar

【发布时间】：2019-10-03 06:01:59

【问题描述】：

我有一个基于国家/地区对象数组填充的表格，我还有一个搜索栏，它将通过国家/地区数组的实时过滤与表格进行交互，仅显示部分或完全匹配用户的国家/地区在搜索栏中输入。

问题是我是 vue 的新手，我无法弄清楚如何让它工作。如果有人可以查看我的代码并直接将我指向右侧，或者我做错了什么，那就太好了！

所以现在我的逻辑是我在文本字段上有一个 v-model，它将用户键入的任何内容绑定到一个名为“filterBy”的数据值。

我的理解可能是不正确的，但我现在想的是，通过在 computed 内部创建一个过滤的Countries 函数，并且由于只要函数内的变量发生变化，computed 就会运行，所以每当在搜索栏中键入内容时，它都会自动被调用，从而过滤国家数组并且表格将被重新呈现。

<template>
  <div class="countries-table">
    <div class="countries-search-bar">
      <v-flex xs12 sm6 md3>
        <v-text-field
          v-model="filterBy"
          placeholder="Search by country name or alpha2"
        />
      </v-flex>
    </div>
    <v-data-table
      :headers="headerValues"
      :items="items"
      :pagination.sync="pagination"
      item-key="id"
      class="elevation-1"
      :rows-per-page-items="[300]"
    >
      <template v-slot:headers="props">
        <tr>
          <th
            v-for="header in props.headers"
            :key="header.text"
            :class="[
              'column sortable',
              pagination.descending ? 'desc' : 'asc',
              header.value === pagination.sortBy ? 'active' : ''
            ]"
            @click="changeSort(header.value)"
          >
            <v-icon small>arrow_upward</v-icon>
             header.text 
          </th>
          <th>
            Edit
          </th>
        </tr>
      </template>

      <template v-slot:items="props">
        <tr :active="props.selected" @click="props.selected = !props.selected">
          <td> props.item.country_alpha2 </td>
          <td class="text-xs-right"> props.item.country_name </td>
          <boolean-cell
            custom-class="text-xs-right"
            :input="props.item.is_active"
            :output=" true: 'Yes', false: 'No' "
          ></boolean-cell>
          <date-cell
            custom-class="text-xs-right"
            :input="props.item.updated_at"
          ></date-cell>
          <td class="text-xs-right" @click="triggerEdit(props.item)">
            <v-icon class="edit-icon">edit</v-icon>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
import BooleanCell from '~/components/global-components/Table/BooleanCell'
import DateCell from '~/components/global-components/Table/DateCell'

export default 
  components: 
    BooleanCell,
    DateCell
  ,
  props: 
    headerValues: 
      type: Array,
      required: true
    ,
    items: 
      type: Array,
      required: true
    
  ,
  computed: 
    filteredCountries() 
      return this.items.filter(country => 
        return country.country_name.includes(this.filterBy)
      )
    
  ,
  data() 
    return 
      pagination: 
        sortBy: 'country_alpha2'
      ,
      filterBy: ''
    
  ,
  methods: 
    changeSort(headerValue) 
      if (this.pagination.sortBy === headerValue) 
        this.pagination.descending = !this.pagination.descending
       else 
        this.pagination.sortBy = headerValue
        this.pagination.descending = false
      
    
  

</script>

尽管我在搜索栏中输入内容，但表格与当前代码保持不变。

谁能告诉我我做错了什么？

【参考方案1】：

对于您正在使用的 v-data-table 项目，items 作为道具提供。您应该使用 filteredCountries 计算属性。