Vue.js实现千条数据列表多条件筛选+模糊搜索功能求助

以下是可直接运行的完整实现代码，核心逻辑是先执行多维度筛选，再对筛选结果执行模糊检索，1000条数据量级下前端直接过滤性能完全足够，无需额外插件：

完整JS代码 #

const app = new Vue({
    el: '#app',
    data: {
        search: '',
        // 存储选中的状态筛选值
        selectedStatus: [],
        userList: [
            {
                id: 1,
                name: "Prem",
                age: 18,
                status: "close",
                gender: "male",
            },
            {
                id: 2,
                name: "Chandu",
                status: "close",
                age: 20,
                gender: "female",
            },
            {
                id: 3,
                name: "Shravya",
                status: "open",
                age: 35,
                gender: "female",
            },
            {
                id: 4,
                name: "Shravya",
                status: "blocked",
                age: 35,
                gender: "female",
            }
        ]
    },
    computed: {
        filteredAndSorted() {
            function compare(a, b) {
                if (a.name < b.name) return -1;
                if (a.name > b.name) return 1;
                return 0;
            }
            return this.userList.filter(user => {
                // 第一步：先做状态筛选，如果没有选中任何状态则跳过该层筛选
                const statusMatch = this.selectedStatus.length === 0 ? true : this.selectedStatus.includes(user.status)
                if (!statusMatch) return false
                // 第二步：对状态筛选后的结果做模糊搜索
                return user.name.toLowerCase().includes(this.search.toLowerCase())
            }).sort(compare)
        }
    }
});
$(document).ready(function () {
    $('.dropdown-submenu a.test').on("click", function (e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});

完整CSS代码 #

和原有代码一致，无需修改：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

完整HTML代码 #

仅修改了状态对应的复选框，增加v-model绑定：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Filtered
        <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="#">Name</a></li>
        <li><a tabindex="-1" href="#">Age</a></li>
        <li><a tabindex="-1" href="#">Gender</a></li>
        <li class="dropdown-submenu">
            <a class="test" tabindex="-1" href="#">Status <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li>
                    <input type="checkbox" value="close" v-model="selectedStatus">
                    <button>Close</button>
                </li>
                <li>
                    <input type="checkbox" value="open" v-model="selectedStatus">
                    <button>Open</button>
                </li>
                <li>
                    <input type="checkbox" value="blocked" v-model="selectedStatus">
                    <button>Blocked</button>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div class="search-wrapper">
    <input type="text" v-model="search" placeholder="Search title.."/>
</div>
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Status</th>
        <th>Gender</th>
    </tr>
    <tr v-for="user in filteredAndSorted">
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>{{ user.status }}</td>
        <td>{{ user.gender }}</td>
    </tr>
</table>
</div>

如果需要扩展性别、年龄等其他维度的筛选，只要参照状态筛选的逻辑，在data中新增对应的筛选存储变量，在computed的过滤逻辑中新增对应的匹配判断，在页面中给对应的筛选控件加v-model绑定即可。

内容的提问来源于stack exchange，提问作者Selaminko Elam