Vue - 如何使用 Javascript 过滤多个值

Question

我有一个数据表，我想向它添加搜索/过滤功能。 我设法部分做到了，但现在我只能过滤数组中的一个元素。 这是数组；

    dataArray: [
          { date: "12.02.2021", time: "Aaa", level: '1111', service: 'Zzzz', description: '124-362' },
          { date: "13.02.2021", time: "Bbbb", level: '2222', service: 'Yyyyy', description: '748-987' },
          { date: "14.02.2021", time: "Cccc", level: '3333', service: 'Xxxxx', description: '012-365' },
          { date: "15.02.2021", time: "Dddd", level: '4444', service: 'Qqqqq', description: '271-016' },
          { date: "16.02.2021", time: "Eeee", level: '5555', service: 'Tttt', description: '341-222' },
          { date: "17.02.2021", time: "Ffff", level: '6666', service: 'Uuuu', description: '932-324' },
          { date: "18.02.2021", time: "Gggg", level: '7777', service: 'Vvvvv', description: '459-974' },
          { date: "19.02.2021", time: "Hhhh", level: '8888', service: 'Wwwww', description: '224-569' },
          { date: "20.02.2021", time: "Jjjj", level: '9999', service: 'Mmmm', description: '617-619' },
          { date: "21.02.2021", time: "Kkkk", level: '10101010', service: 'Nnnnn', description: '825-379' },
        ],

这是 HTML；

          <tr v-for="(dataArray, i) in filteredItems" :key="i">
            <p class="table-iterator">{{i--}}</p>
            <td class="table-row text-left">{{connectivityLogs.date}}</td>
            <td class="table-row text-center">{{connectivityLogs.time}}</td>
            <td class="table-row text-center">{{connectivityLogs.level}}</td>
            <td class="table-row text-center">{{connectivityLogs.service}}</td>
            <td class="table-row text-right">{{connectivityLogs.description}}</td>
          </tr>

<input type="text" v-model="search">上面还有一个输入，我在 Vue 脚本的data部分定义了search变量。

最后，这是我如何使用计算属性过滤元素（仅时间）；

computed: {
  filteredItems(){
    return this.dataArray.filter(dataArray => {
      return dataArray.time.toLowerCase().indexOf(this.search.toLowerCase()) > -1
    })
  }
}

我的问题是，我怎样才能对所有这些进行过滤操作？ 现在我只能过滤时间。

Answer 1

此答案假定您需要一个可以搜索所有字段的搜索框。

在每个字段中搜索一个值：

computed: {
  filteredItems(){
    return this.dataArray.filter(dataArray => {
      return Object.values(dataArray).some(value => {
        value.toLowerCase().indexOf(this.search.toLowerCase()) > -1
      })
    })
  }
}

上面使用Object.values()来获取每个 object 的值作为数组，然后检查字段的some()是否包含搜索文本。