vue纯前端可以做到多条件列表查询吗？

Question

为了临时给客户展示页面，又不需要用到后端查询接口，想用纯前端做出查询效果，单条件查询还好，多条件模糊查询就不知道了。

Answer 1

得看后端使用的框架是否支持，比如说JeecgBoot就有提供给前端的查询过滤器。
前端通过一些规则就可以经行筛选，具体可以看我的这篇笔记。

如果后端不支持，那么就只能前端把数据都查询出来，然后自行筛选，可以使用 filter 方法去过滤。模糊查询可以用 String.includes() 去匹配，如果说需要有大于小于匹配的话就得自己写个处理函数了。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

试试这个方法

function filterData(condition, data) {
            let filter = (condition, data) => {
                return data.filter((item) => {
                return Object.keys(condition).every((key) => {
                    if (condition[key] == '') return true 
                    let diff =
                    key == 'val' || key == 'label' //多个条件模糊查询
                        ? String(item[key]).toLowerCase().indexOf(String(condition[key]).trim().toLowerCase()) !== -1
                        : String(item[key]).toLowerCase() == String(condition[key]).trim().toLowerCase()
                    return diff
                })
                })
            }
            console.log('888888', filter(condition, data))
            return filter(condition, data)
        }

        const constructionFlagList = [
            { val: '12', label: '是的' },
            { val: '13', label: '否啊1' },
            { val: '13', label: '否啊2' },
            { val: '143', label: '否啊3' }
        ]

        filterData({ val: '13', label: '啊' }, constructionFlagList)

效果如下