前端做模糊查询 前端做多字段模糊查询

 拿走直接用 

//查询输入框的数据结构
ssView:{
                cargoName:'',
                deptId:'',
                cargoNo:'', 
                specifcation:'', 
            },

//this.voData.allDts 的数据结构为   [
{
cargoName:'',
deptId:'',
cargoNo:'',
specifcation:'',
}
]
watch:{
        ssView:{ //在组件中监听传入的数据 数据发生改变调用模糊搜索
            deep:true,
            immediate:true,
            handler(newVal) {
                let arr = []
                arr = JSON.parse(JSON.stringify(this.voData.allDts))  
                // 利用深拷贝在前端储存一份原始数据每次触发都获取原始数据
                this.allDts= arr.filter(item =>
                    item.deptId.indexOf(this.ssView.deptId) > -1 &&
                    item.cargoNo.indexOf(this.ssView.cargoNo) > -1 &&
                    item.specifcation.indexOf(this.ssView.specifcation) > -1 &&
                    item.cargoName.indexOf(this.ssView.cargoName) > -1
                );
            }
        }
    },

如果有需要点击时调用可以放在方法中点击触发    数据结构一样

↓↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓↓

↓↓↓↓↓↓↓

看到了这里你以为就是为了骗你一个关注？

其实是想告诉你，这样写如果被查询的数据对应字段为null，会报错，建议为null的时候处理一下

arr.map((item,index)=>{
                    if(item.cargoName==null){ item.cargoName = ''}
                    if(item.specifcation==null){item.specifcation = ''}
                    if(item.deptId==null){item.deptId = '' }
                    if(item.cargoNo==null){item.cargoNo = ''}
                    if(item.businessUnits==null){item.businessUnits = ''}
                })