vue如何多条件筛选数组对象

经常出现的一个情况，就是一些表格数据，后端会给全部的数据过来，然后前端要根据上面搜索条件，很多个来筛选出对应的数据。
要求就是，没有选中的就是不筛选。选中了几个就是对应筛选这几个条件符合的数据出来。
一般都是数组对象的形式。请问这种有什么好用的方法可以做

以下回答来自GPT，请参考：
在 Vue 中，你可以使用计算属性（computed）来实现对表格数据的筛选操作。通过监听搜索条件的变化，计算属性可以动态地返回符合条件的数据。

以下是一个简单的示例代码，假设有一个表格数据数组 tableData 和多个搜索条件 searchOptions，每个搜索条件都有一个名称和一个布尔值表示是否选中：

// 数据
data() {
  return {
    tableData: [
      { name: 'Alice', age: 25 },
      { name: 'Bob', age: 30 },
      { name: 'Charlie', age: 28 }
      // 其他数据项...
    ],
    searchOptions: [
      { name: '选项1', selected: false },
      { name: '选项2', selected: true },
      { name: '选项3', selected: true }
      // 其他选项...
    ]
  };
},

// 计算属性
computed: {
  filteredData() {
    return this.tableData.filter(item => {
      // 遍历每个搜索选项，并只保留选中的项
      return this.searchOptions.every(option => !option.selected || item[option.name]);
    });
  }
}

在这个示例中，filteredData 计算属性会根据搜索选项动态地返回筛选后的数据。在过滤函数中使用了 Array.prototype.filter() 方法，结合 Array.prototype.every() 方法来判断是否符合所有选中的条件。

最后，在模板中绑定 filteredData 属性即可将筛选后的数据展示在页面上。

<table>
  <tr v-for="item in filteredData" :key="item.name">
    <td>{{ item.name }}</td>
    <td>{{ item.age }}</td>
  </tr>
</table>

通过这种方式，你可以根据搜索条件动态地筛选出符合条件的表格数据。当搜索条件发生变化时，计算属性就会重新计算，从而实现数据的动态更新。

这种不是一般都是 把筛选条件传参到后端然后 请求后端接口来获取吗
实在要前端做的话可以借助lodash 参考代码如下

<template>
    <div>
        <div @click="getTableData()">222</div>
    </div>
</template>

<script>
let _ = require('lodash')
export default {
  data () {
    return {
      filter: {
        state: '-1', // 按状态检索
        building: '4号楼' // 按所属楼宇检索
      },
      tableData: [
        {
          building: '4号楼',
          address: '0805室',
          name: '呵呵呵有限公司',
          state: 0
        },
        {
          building: '2号楼',
          address: '0805室',
          name: '上海哔哩哔哩有限公司',
          state: 1
        }
      ]
    }
  },
  methods: {
    getTableData () {
      const filtertemp = _.omitBy(this.filter, params => params === '-1')
      // filter函数不会改变原数组，故可直接作为返回值返回
      console.log(_.filter(this.tableData, filtertemp))
    }
  }
}
</script>

img

【以下回答由 GPT 生成】

可以使用Vue的计算属性和过滤器来实现根据多个条件筛选数组对象的功能。

首先，在Vue的data中定义数组对象和搜索条件的属性：

data() {
  return {
    data: [
      { id: 1, name: 'Alice', gender: 'Female', age: 25 },
      { id: 2, name: 'Bob', gender: 'Male', age: 30 },
      { id: 3, name: 'Charlie', gender: 'Male', age: 20 }
    ],
    search: {
      name: '',
      gender: '',
      age: ''
    }
  }
}

然后，定义计算属性来进行筛选操作：

computed: {
  filteredData() {
    return this.data.filter(item => {
      if (this.search.name && item.name.toLowerCase().indexOf(this.search.name.toLowerCase()) === -1) {
        return false;
      }
      if (this.search.gender && item.gender !== this.search.gender) {
        return false;
      }
      if (this.search.age && item.age !== parseInt(this.search.age)) {
        return false;
      }
      return true;
    });
  }
}

上述计算属性filteredData使用了filter方法来筛选符合条件的数据。根据每个条件的选中情况，判断是否对该条件进行筛选操作。如果某个条件没有被选中，则跳过该条件的筛选。

最后，在模板中可以通过filteredData计算属性来使用筛选后的数据：

<template>
  <div>
    <input type="text" v-model="search.name" placeholder="Name">
    <select v-model="search.gender">
      <option value="">Gender</option>
      <option value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <input type="number" v-model="search.age" placeholder="Age">

    <table>
      <thead>
        <th>ID</th>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.gender }}</td>
          <td>{{ item.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

在模板中，使用v-model指令将输入框和选择框的值与搜索条件的属性进行绑定。通过v-for指令遍历filteredData计算属性得到的筛选后的数据，并在表格中展示。

这样，当搜索条件发生变化时，计算属性会重新计算，并更新模板中展示的数据。同时，未选中的条件不会进行筛选操作，只有选中的条件才会参与筛选。

希望以上解决方案能够满足您的需求，如果有任何疑问，请随时提出。



【相关推荐】



如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^