Javascript Vue，html表的多重过滤器

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

这有意义吗？使用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() {})
    }
 }

标题
资源
地方
地位
{{dateEvent.title}}
{{dateEvent.resource}}
{{dateEvent.location}
{{dateEvent.status}
数据（）{
返回{
日期事件：[]
},
创建（）{
this.fetchItems（）；
},
方法：{
fetchItems（）{
获取（“/home/resource\u items”）
。然后（响应=>{
//成功
console.log（response.data）
this.dateEvents=response.data
})
.catch（函数（错误）{
console.log（错误）
})
.finally（函数（）{}）
}
}

您可以使用

computed

功能自动计算：

• 要在表中显示的

  dateEvents

  的筛选数组
• 要在筛选器中显示的

  标题数组

• 要在筛选器中显示的

  资源数组

• 要在筛选器中显示的

  位置数组

• 要在筛选器中显示的

  状态数组

以下是一个例子：

...

<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;
  },

},

...

。。。
{{title}}
{{resource}}
{{location}}
{{status}}
重置
...
{{dateEvent.title}}
{{dateEvent.resource}}
{{dateEvent.location}
{{dateEvent.status}
...
...
数据（）{
返回{
日期事件：[]，
过滤器：{
标题：空，
资源：null，
位置：空，
状态：空，
},
};
},
计算（）{
过滤的（）{
返回此.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）；
},
标题（）{
返回此.dataEvents
.map（dataEvent=>dataEvent.title）
.filter（（标题，索引，self）=>self.indexOf（标题）==index）；
},
资源（）{
返回此.dataEvents
.map（dataEvent=>dataEvent.resource）
.filter（（资源，索引，self）=>self.indexOf（资源）==index）；
},
地点（）{
返回此.dataEvents
.map（dataEvent=>dataEvent.location）
.filter（（位置，索引，self）=>self.indexOf（位置）==索引）；
},
状态（）{
返回此.dataEvents
.map（dataEvent=>dataEvent.status）
.filter（（状态，索引，self）=>self.indexOf（状态）==index）；
},
},
方法：{
重置（）{
this.filters.title=null；
this.filters.resource=null；
this.filters.location=null；
this.filters.status=null；
},
},
...

谢谢，这很有效！但我有一个问题：我如何保留此选项并添加一个选项来重置选择？就像我选择了“红色”并仅显示红色记录，但希望有效地删除红色并再次显示所有记录一样。我更新了上面的代码，添加了

元素和

方法
部分和
reset（）
方法。