vue 更多筛选 列表字段动态搜索

一、需求：表格常用功能经常有字段筛选、更多字段筛选弹框来过滤出我们所需要的数据。每一个查询字段都会调用一次查询接口。

 

二、实现：

 1.更多筛选字段获取，触发接口查询。点击确定按钮绑定触发的方法；

//筛选确定
submit(){
	this.isShowDialog = false;
	this.$emit("searchBack",this.searchForm);
},

2.列表页面在点击确定之后就触发了绑定在dialog的方法；

//接收更多筛选对话框传回来的搜索值
searchBack(searchForm){
	this.queryForm.name=searchForm.name;
	if(!!searchForm.inDate){
		this.queryForm.inStartTime=searchForm.inDate[0];
		this.queryForm.inEndTime=searchForm.inDate[1];
	}else{
		this.queryForm.inStartTime=null;
		this.queryForm.inEndTime=null;
	}
},

3.接口方法处理获取参数；

//获取列表
queryListPage:function(data){
	this.loading=true;
    var params={}
    if(data.pageNum){
		params.page=data.pageNum?data.pageNum:1
	}
	if(data.pageSize){
		params.rows=data.pageSize
	}
	let paramObj = Object.assign({}, this.queryForm)
	paramObj = this.dealParam(paramObj);
	params.cond = JSON.stringify(paramObj);
	getDataList(params).then(res => {
		if (res.code == 200) {
            this.pageParams={
		        pageNum: data.pageIndex,
		        pageSize: data.pageSize,
		        total: data.total,
		        totalPage: data.totalPage,
	        }
	         this.tableData=data.contents
        }
    }).finally(res => {
		this.loading=false;
	})
},
//处理参数，填了啥才传啥字段
dealParam(obj){
	let cond={};
	if (obj.code1) {
		cond.code1=obj.code1;
	}
	if (obj.code2) {
		cond.code2=obj.code2;
	}
	// 更多筛选
	if (obj.name) {
		cond.name=obj.name;
	}
	if (obj.inStartTime) {
		cond.inStartTime=obj.inStartTime;
	}
	if (obj.inEndTime) {
		cond.inEndTime=obj.inEndTime;
	}
	return cond;
},

4.监听在queryForm，自动触发表格接口调用方法；

//数据定义
queryForm:{
	code1:"",
	code2:"",
	name:"",
	inStartTime:"",
	inEndTime:"",
},

watch:{
  queryForm: {
      handler(cur,old) {
    	  this.queryListPage({pageNum:1, pageSize:20});
	  },
	  deep:true,
  },
}