前端 本地分页,过滤,且或过滤

话不多说 直接上代码

分页方法

export default {
    data() {
        return {
            filter: new Map(),
            filterOr: new Map(),
            sort: {},
            listBak: [],
            cacheMap: new Map()
        }
    }
    ,
    methods: {
        filterData(filter = new Map([['name', ['1']]]), list = [],
                   sort = {'sort': 'descend', 'sortField': 'id'}, filterOr = new Map()) {
            if (filter.has && list.filter) {
                //第一步过滤字段
                let newList  //返回的新数组
                let isTrue   //且判断是否为true
                let arr      // 接受过滤字段的数组  每个过滤字段为key,value为过滤的值数组
                let isCheck = false  // 若存在或条件,用来保留是否某个条件满足
                let isOr = filterOr.size > 0 //是否存在或判断
                if (filter.size || filterOr.size) {
                    newList = list.filter((item) => {
                        isCheck = false
                        isTrue = true
                        outer :for (let fieldValue in item) {
                            if (filter.has(fieldValue) && (arr = filter.get(fieldValue)).length) {
                                isTrue = false
                                for (let index in arr) {
                                    if (arr[index].length === 0
                                        || (item[fieldValue].toString && item[fieldValue].toString().indexOf(arr[index].toString()) >= 0)) {
                                        isTrue = true
                                        break
                                    }
                                }
                                if (!isTrue) break
                            } else isTrue = true
                            if (isOr && isTrue && (!isCheck)) {
                                if (filterOr.has(fieldValue) && (arr = filterOr.get(fieldValue)).length) {
                                    isTrue = false
                                    for (let index in arr) {
                                        if (arr[index].length === 0
                                            || (item[fieldValue].toString && item[fieldValue].toString().indexOf(arr[index].toString()) >= 0)) {
                                            isCheck = true
                                            isTrue = true
                                            break
                                        }
                                    }
                                } else isTrue = true
                            }
                        }
                        return isTrue & (isOr ? isCheck : true)
                    })
                } else {
                    newList = list
                }
                if (sort && sort['sort'] && sort['sortField']) {
                    let sortFiled = sort['sortField']
                    let i
                    if (sort["sort"] === 'ascend') {
                        i = 1
                    } else {
                        i = -1
                    }
                    newList = newList.sort((a, b) => {
                        let int
                        if (a[sortFiled] > b[sortFiled]) {
                            int = 1
                        } else if (a[sortFiled] === b[sortFiled]) {
                            int = 0
                        } else {
                            int = -1
                        }
                        return int * i
                    })
                }
                return newList
            } else {
                console.error('表格过滤参数异常!')
                return []
            }
        },
        /**
         * 复制map,当map的value为array时,get取出操作后,会有问题,需要重新for复制保证泛型
         * @param source
         * @returns {Map<any, any>}
         */
        copyMap(source = new Map()) {
            const map = new Map()
            source.forEach((value, key) => {
                map.set(key, value)
            })
            return map
        },
        /**
         * 添加一个表格外组件的检索条件到缓存队列
         * @param name
         * @param value
         */
        addCache(name = '', value) {
            const arr = this.cacheMap.get(name);
            if (arr && arr.push) {
                if (!arr.some(i => i === value)) {
                    arr.push(value)
                    this.cacheMap.set(name, arr)
                }
            } else {
                this.cacheMap.set(name, [value]);

            }
        },
        /**
         * 此处用于删除缓存和过滤条件中的缓存数据
         * @param name
         */
        deleteCache(name) {
            let ar;
            const arr = (ar = this.cacheMap.get(name) && ar.length) || []
            this.cacheMap.delete(name)
            const arr2 = (ar = this.filter.get(name) && ar.length) || []
            const newArr = Object.assign([], arr2)
            for (let i in arr2) {
                for (let i2 in arr) {
                    arr2[i] === arr[i2] && newArr.slice(i, 1)
                }
            }
            this.filter.set(name, newArr)
        },
        /**
         *  用于删除filter过滤条件中的缓存数据
         * @param name
         * @param value
         */
        deleteFilter(name = '', value) {
            const arr = this.filter.get(name)
            if (arr && arr.filter) {
                this.filter.set(name, arr.filter((item) => item != value))
            }
        },
        /**
         *  用于删除filterOr过滤条件中的缓存数据
         * @param name
         * @param value
         */
        deleteFilterOr(name = '', value) {
            const arr = this.filterOr.get(name)
            console.log("orArr", arr)
            if (arr && arr.filter) {
                this.filterOr.set(name, arr.filter((item) => item != value))
            }
        },
        deleteFilters(name = '', values = []) {
            const arr = this.filter.get(name)
            if (arr && arr.filter) {
                this.filter.set(name, arr.filter((item) => {
                    for (let i in values) {
                        if (item === i) {
                            values.slice(i, 1)
                            return true
                        }
                    }
                    return false
                }))
            }
        },
        /**
         * 设置过滤数据
         * @param name
         * @param value
         * @param map
         */
        setFilter(name = '', value, map) {
            if (!value) return
            let item = this.filter.get(name)
            if (item && item.push) {
                // const items = []
                // for (let index in item) {
                //     if (item[index] !== value)
                //         items.push(item[index])
                // }
                if (!item.some((i) => i === value))
                    item.push(value)
                this.filter.set(name, item)
                map.set(name, item)
            } else {
                map.set(name, [value])
                this.filter.set(name, [value])
            }
        },
        /**
         * 设置或条件过滤数据
         * @param name
         * @param value
         * @param map
         */
        setFilterOr(name = '', value, map) {
            if (!value) return
            let item = this.filterOr.get(name)
            if (item && item.push) {
                // const items = []
                // for (let index in item) {
                //     if (item[index] !== value)
                //         items.push(item[index])
                // }
                if (!item.some((i) => i === value))
                    item.push(value)
                this.filterOr.set(name, item)
                map.set(name, item)
            } else {
                map.set(name, [value])
                this.filterOr.set(name, [value])
            }
        },
        setFilters(arr = [{name: '', value: ''}], map) {
            let item
            if (arr && arr.push && arr.length && map && map.has)
                for (let i in arr) {
                    item = arr[i]
                    if (item && item.hasOwnProperty('name') && item.hasOwnProperty('value'))
                        this.setFilter(item['name'], item['value'], map)
                }
        },
        initFilter(filters, filter) {
            let map = new Map()
            const keys = Object.keys(filters)
            if (keys.length === 0)
                return map
            let index
            for (index in keys) {
                map.set(keys[index], filters[keys[index]])
                filter.set(keys[index], filters[keys[index]])
            }
            return map
        },
        clearFiltersAll() {
            this.filter.clear()
            this.filterOr.clear()
            this.sort = {}
        },
        clearFilter(name, value) {
            let item = this.filter.get(name)
            if (item && item.filter) {
                this.filter.set(name, item.filter(item => item !== value))
            }
            item = this.filterOr.get(name)
            if (item && item.filter) {
                this.filterOr.set(name, item.filter(item => item !== value))
            }
        },
        /**
         * 可循环设置初始化值
         * @param obj
         * @param defaultValue
         * @param fields
         */
        clearObjFieldsVal(obj = {}, defaultValue = 'auto', fields = []) {
            const keys = Object.keys(obj)
            if (keys.length === 0)
                return
            defaultValue = typeof defaultValue === "string" ? defaultValue : ''
            fields = fields.push ? fields : []
            let index
            for (index in keys)
                fields.length > 0 ?
                    (fields.some(field => field === keys[index]) &&
                        (defaultValue === 'auto' ? obj[keys[index]] = this.setDefault(obj[keys[index]]) : obj[keys[index]] = defaultValue))
                    : (defaultValue === 'auto' ? obj[keys[index]] = this.setDefault(obj[keys[index]]) : obj[keys[index]] = defaultValue)
        },
        setDefault(val) {
            const type = typeof val
            if (type === "number")
                return 0
            else if (type === "string")
                return ''
            this.clearObjFieldsVal(val)
            return val
        },
        resetObjFields(fieldName = '', vue = undefined) {
            if (!fieldName || !vue || !vue.$options || !(typeof vue.$options.data !== "function"))
                return null
            return vue.$options.data()[fieldName]
        },
    }
} 

直呼好家伙,感谢k哥。

花点点时间,好好看看markdown :grimacing:

好滴好滴

这次我就不给你编辑了,你看完了之后,自己编辑一下。不然没法看。

好,我一会看一下mk编辑代码