前端-案例-改变查询页面查询条件日期的值，并进行查询

需求说明

页面载入时默认查询指定日期范围的数据，有个接口会返回日期范围，需要通过js修改查询条件日期的值进行搜索

实现思路

需要修改查询条件字段的值，然后触发搜索，这个查询字段用的是WeaDateGroup组件，一般这种改变时触发动作的都是需要调用组件的 onChange() 来实现，所以需要调用该组件的 onChange() 函数，来执行修改字段值并触发搜索

具体步骤

1.我们需要知道onChange具体的参数是什么，先复写该组件，然后在onChange函数里调用原组件里的onChange，进行debugger

2.调试看到了onChange的具体参数，为一个数组，数组第一个元素是日期字段选项的值，第二个是开始日期，第三个是结束日期

3.知道了onChange的具体参数之后就知道怎么调用onChange了，通过复写组件参数来获取到onChange，向window对象添加一个函数，用来调用该组件的onChange

ecodeSDK.overwritePropsFnQueueMapSet('WeaDateGroup',{
  fn:(props)=>{
    if(location.href.includes('/main/cube/search?customid=588')){
      window.changeSearchConditon = (startDate,endDate)=>{
        props.onChange(['6',startDate,endDate]);
      }
    }
  }
});

4.就可以在其它地方调用到该组件的onChange了，例如在控制台中调用，回到我们的需求，在接口返回日期范围时调用changeSearchConditon()并传入开始日期和结束日期即可

源码