Question

我有一个过滤器组件，该组件基于多个输入值来过滤人员列表。基于字符串的输入过滤器没有问题，但是当我在多重选择中选择多个项目时，没有显示任何内容，我认为是因为person.role在数组中没有包含两个值。

<!-- rest of form -->
<v-select
  outlined
  multiple
  v-model="filter.roleFilter"
  :items="['Designer', 'Developer']"
/>
<!-- rest of form -->

过滤器功能

 computed: {
   filteredPeople() {
      const searchVal = this.search;
      const type = this.filter.accountypeFilter;
      const role = this.filter.roleFilter; 
      const start = this.filter.dateStartFilter;
      const end = this.filter.dateEndFilter;

      if (type === '' && role === '' && start === '' && end === '' && searchVal === '') {
        return this.people; // return everything if no filters are selected
      }
      // return the array after passing it through the filter function
      return this.people.filter((person) => (type === '' || person.accountType === type)
        && (role === '' || person.role.includes(role)) // <--- the problem is with this line
        && (start === '' || person.dateStart === start)
        && (end === '' || person.dateEnd === end)
        && (searchVal === '' || person.displayName.toLowerCase().includes(searchVal.toLowerCase())));
    },
  }

是否有类似role.every(person.role.includes(role))的东西，以便我可以进行这项工作？

Answer 1

您可以执行以下操作，仅当一个人具有单个角色时，此方法才有效

computed: {
   filteredPeople() {
      const searchVal = this.search;
      const type = this.filter.accountypeFilter;

      // if the this.filter.roleFilter is array of stings keep this as it is
      const role = this.filter.roleFilter; 

      // else if it is of array objects somethings like [{value: "123", test: "test"}] do the below
      // const role = this.filter.roleFilter.map(x => x.value); 
      const start = this.filter.dateStartFilter;
      const end = this.filter.dateEndFilter;

      if (type === '' && role === '' && start === '' && end === '' && searchVal === '') {
        return this.people; // return everything if no filters are selected
      }
      // return the array after passing it through the filter function
      return this.people.filter((person) => (type === '' || person.accountType === type)
        && (role.length === 0 || role.includes(person.role)) // <--- the problem is with this line
        && (start === '' || person.dateStart === start)
        && (end === '' || person.dateEnd === end)
        && (searchVal === '' || person.displayName.toLowerCase().includes(searchVal.toLowerCase())));
    },
  }

根据多选数组过滤列表

1 个答案: