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;

  },

},

...