Vue，html表格的多重过滤器

Question

我正在使用 vue 从 axios 调用中获取返回的对象，并用它填充一个 html 表。我有我想要的表格，但我想知道是否有办法（不想将整个东西转换为数据表）使每个标题成为表格的过滤器，以便可以为整个表格过滤多个列.基本上，假设行在“资源”列中有“卡车”、“拖车”和“容器”等项目。我正在考虑该列标题上的下拉过滤器，它将显示所有资源的行，或者我可以选择“卡车”，以便只有带有“卡车”的行显示在表格上。

这有意义吗？ Vue 有没有固有的方法来做到这一点？

<table style="width:100%; text-align:center;">
<thead>
    <tr>
        <th>Title</th>
        <th>Resource</th>
        <th>Location</th>
        <th>Status</th>
    </tr>
</thead>
<tbody  v-for="dateEvent in dateEvents">
    <tr>
        <td v-if="dateEvent.id === '2'">{{ dateEvent.title }}</td>
        <td v-if="dateEvent.id === '2'">{{ dateEvent.resource }}</td>
        <td v-if="dateEvent.id === '2'">{{ dateEvent.location }}</td>
        <td v-if="dateEvent.id === '2'">{{ dateEvent.status }}</td>
    </tr>
  </tbody>
</table>



data () {
return {
    dateEvents: []
},
created() {
    this.fetchItems();
},
methods: {
    fetchItems() {
        axios.get('/home/resource_items')
        .then(response => {
          // handle success
          console.log(response.data)
          this.dateEvents = response.data
        })
        .catch(function(error) {
          console.log(error)
        })
        .finally(function() {})
    }
 }

Answer 1

您可以使用computed 功能自动计算：

• 要在表格中显示的 dateEvents 的过滤数组
• 要在过滤器中显示的 titles 数组
• 要在过滤器中显示的 resources 数组
• 要在过滤器中显示的 locations 数组
• 要在过滤器中显示的 statuses 数组

这是一个例子：

...

<select v-model="filters.title">
  <option v-for="title in titles" :value="title">{{ title }}</option>
</select>

<select v-model="filters.resource">
  <option v-for="resource in resources" :value="resource">{{ resource }}</option>
</select>

<select v-model="filters.location">
  <option v-for="location in locations" :value="location">{{ location }}</option>
</select>

<select v-model="filters.status">
  <option v-for="status in statuses" :value="status">{{ status }}</option>
</select>

<button @click="reset">Reset</button>

...

  <tbody v-for="dateEvent in filtered">
    <tr>
      <td>{{ dateEvent.title }}</td>
      <td>{{ dateEvent.resource }}</td>
      <td>{{ dateEvent.location }}</td>
      <td>{{ dateEvent.status }}</td>
    </tr>
  </tbody>

...


...

data() {
  return {
    dateEvents: [],
    filters: {
      title: null,
      resource: null,
      location: null,
      status: null,
    },
  };
},


computed() {

  filtered() {
    return this.dataEvents
      .filter(dataEvent => !this.filters.title || dataEvent.title === this.filters.title),
      .filter(dataEvent => !this.filters.resource || dataEvent.resource === this.filters.resource),
      .filter(dataEvent => !this.filters.location || dataEvent.location === this.filters.location),
      .filter(dataEvent => !this.filters.status || dataEvent.status === this.filters.status);
  },

  titles() {
    return this.dataEvents
      .map(dataEvent => dataEvent.title)
      .filter((title, index, self) => self.indexOf(title) === index);
  },

  resources() {
    return this.dataEvents
      .map(dataEvent => dataEvent.resource)
      .filter((resource, index, self) => self.indexOf(resource) === index);
  },

  locations() {
    return this.dataEvents
      .map(dataEvent => dataEvent.location)
      .filter((location, index, self) => self.indexOf(location) === index);
  },

  statuses() {
    return this.dataEvents
      .map(dataEvent => dataEvent.status)
      .filter((status, index, self) => self.indexOf(status) === index);
  },
},


methods: {

  reset() {
    this.filters.title = null;
    this.filters.resource = null;
    this.filters.location = null;
    this.filters.status = null;
  },

},

...