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">&nbsp; <option v-for="title in titles" :value="title">{{ title }}</option></select><select v-model="filters.resource">&nbsp; <option v-for="resource in resources" :value="resource">{{ resource }}</option></select><select v-model="filters.location">&nbsp; <option v-for="location in locations" :value="location">{{ location }}</option></select><select v-model="filters.status">&nbsp; <option v-for="status in statuses" :value="status">{{ status }}</option></select><button @click="reset">Reset</button>...&nbsp; <tbody v-for="dateEvent in filtered">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td>{{ dateEvent.title }}</td>&nbsp; &nbsp; &nbsp; <td>{{ dateEvent.resource }}</td>&nbsp; &nbsp; &nbsp; <td>{{ dateEvent.location }}</td>&nbsp; &nbsp; &nbsp; <td>{{ dateEvent.status }}</td>&nbsp; &nbsp; </tr>&nbsp; </tbody>......data() {&nbsp; return {&nbsp; &nbsp; dateEvents: [],&nbsp; &nbsp; filters: {&nbsp; &nbsp; &nbsp; title: null,&nbsp; &nbsp; &nbsp; resource: null,&nbsp; &nbsp; &nbsp; location: null,&nbsp; &nbsp; &nbsp; status: null,&nbsp; &nbsp; },&nbsp; };},computed() {&nbsp; filtered() {&nbsp; &nbsp; return this.dataEvents&nbsp; &nbsp; &nbsp; .filter(dataEvent => !this.filters.title || dataEvent.title === this.filters.title),&nbsp; &nbsp; &nbsp; .filter(dataEvent => !this.filters.resource || dataEvent.resource === this.filters.resource),&nbsp; &nbsp; &nbsp; .filter(dataEvent => !this.filters.location || dataEvent.location === this.filters.location),&nbsp; &nbsp; &nbsp; .filter(dataEvent => !this.filters.status || dataEvent.status === this.filters.status);&nbsp; },&nbsp; titles() {&nbsp; &nbsp; return this.dataEvents&nbsp; &nbsp; &nbsp; .map(dataEvent => dataEvent.title)&nbsp; &nbsp; &nbsp; .filter((title, index, self) => self.indexOf(title) === index);&nbsp; },&nbsp; resources() {&nbsp; &nbsp; return this.dataEvents&nbsp; &nbsp; &nbsp; .map(dataEvent => dataEvent.resource)&nbsp; &nbsp; &nbsp; .filter((resource, index, self) => self.indexOf(resource) === index);&nbsp; },&nbsp; locations() {&nbsp; &nbsp; return this.dataEvents&nbsp; &nbsp; &nbsp; .map(dataEvent => dataEvent.location)&nbsp; &nbsp; &nbsp; .filter((location, index, self) => self.indexOf(location) === index);&nbsp; },&nbsp; statuses() {&nbsp; &nbsp; return this.dataEvents&nbsp; &nbsp; &nbsp; .map(dataEvent => dataEvent.status)&nbsp; &nbsp; &nbsp; .filter((status, index, self) => self.indexOf(status) === index);&nbsp; },},methods: {&nbsp; reset() {&nbsp; &nbsp; this.filters.title = null;&nbsp; &nbsp; this.filters.resource = null;&nbsp; &nbsp; this.filters.location = null;&nbsp; &nbsp; this.filters.status = null;&nbsp; },},...