Question

我有一个选择框和一个搜索字段，用于筛选我的数据表。我创建了两个计算属性-第一个是类别过滤器，它从get调用获取名称和id，并将值与另一个调用的值进行比较。第二个计算的属性用于普通表搜索。如何将这两个属性合并为一个属性，以便将其应用于表？

计算：

computed: {
  filteredTableData() {
      if (this.selectedId !== null) {
          const filtered = this.tableData.filter(d => {   
              let mediaTypeJ = this.mediaTypeId.find(x => {
              return x.ID === this.selectedId;
          });  
      return d.mediaTypeName === mediaTypeJ.name;
      });
      return filtered
      }
  return this.tableData
  },

  searchFilter() {
      return this.tableData.filter (item => {
      return 
  item.name.toLowerCase().match(this.search.toLowerCase()) ||     
  item.level.toLowerCase().match(this.search.toLowerCase()) ||      
  item.house.toLowerCase().match(this.search.toLowerCase())
   });  
  },
 }

HTML：

<tbody>       
    <tr v-for="(item, index) in filteredTableData">  
        <td>{{ item.name }}</td>  
        <td>{{ item.level }}</td>  
        <td>{{ item.house }}</td>  
    </tr>
</tbody>

谢谢！

Answer 1

您不会合并它们。您的过滤器功能应仅考虑这两个属性，并且将在任一更改时触发。因此，从本质上讲，您计算出的过滤器是组合属性。

Answer 2

尝试一下：

  searchFilter() {
      return this.filteredTableData.filter (item => {
        return 
          item.name.toLowerCase().match(this.search.toLowerCase()) ||     
          item.level.toLowerCase().match(this.search.toLowerCase()) ||      
          item.house.toLowerCase().match(this.search.toLowerCase())
      });  
  },

将filteredTableData过滤为searchFilter，然后在模板中使用它。

<tbody>       
    <tr v-for="(item, index) in searchFilter">  
        <td>{{ item.name }}</td>  
        <td>{{ item.level }}</td>  
        <td>{{ item.house }}</td>  
    </tr>
</tbody>

将两个计算的属性合并为一个

2 个答案: