组合多个过滤器列表答案

【问题标题】：Combining multiple filter list组合多个过滤器列表
【发布时间】：2020-12-31 14:56:49
【问题描述】：

我有 4 个过滤器。所有这些都可以正常工作，但是如何将名字和姓氏组合为单个过滤器输入。这样当用户输入名字时，它会同时检查名字和姓氏。现在我只是将它们分开。

<template>
<div>
  <input type="text" class="form-control" placeholder="Filter by First name" v-model="search_first_name">
  <input type="text" class="form-control" placeholder="Filter by Last name" v-model="search_last_name">
  <input type="text" class="form-control" placeholder="Filter by employee number" v-model="search_empNumber">
  <input type="text" class="form-control" placeholder="Filter by department" v-model="search_department">
</div>
<table class="table table-hover rounded-lg tbl-responsive">
    <thead>
        <tr>
            <th>Emp ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Employee Number</th>
            <th>Contact</th>
            <th>Department</th>
            <th>Position</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(employee,index) in filteredEmployee" :key="employee.id">
            <td>{{employee.id}}</td>
            <td>{{employee.firstname}}</td>
            <td>{{employee.lastname}}</td>
            <td>{{employee.employee_number}}</td>
            <td>{{employee.contact}}</td>
            <td>{{employee.department}}</td>
            <td>{{employee.position}}</td>
            <td>{{employee.basic_salary}}</td>
        </tr>
    </tbody>
</table>
</template>
<script>
export default {
    computed: {
        filteredEmployee: function(){
            return this.filterByDepartment(this.filterByEmpNumber(this.filterByFirstName(this.filterByLastName(this.employeeList))))
        }
    },
    methods:{
        filterByDepartment: function(employees){
            return employees.filter(employee => !employee.department.indexOf(this.search_department))
        },
        filterByFirstName: function(employees){
            return employees.filter(employee => !employee.firstname.indexOf(this.search_first_name))
        },
        filterByLastName: function(employees){
            return employees.filter(employee => !employee.lastname.indexOf(this.search_last_name))
        },
        filterByEmpNumber: function(employees){
            return employees.filter(employee => !employee.employee_number.indexOf(this.search_empNumber))
        },
    }
}

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以对名字和姓氏使用单个字段，

<input type="text" class="form-control" placeholder="Filter by Name" v-model="search_by_name">

然后在方法中按两个字段搜索。

filterByName: function(employees){
    return employees.filter(employee => !employee.firstname.indexOf(this.search_by_name) || !employee.lastname.indexOf(this.search_by_name))
}

【讨论】：