elementui中form表单 resetFields 失效

resetFields使用的条件是prop属性是必填的，不然就会失效。

prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	

背景：我封装的搜索组件，发现加上的日期在点击重置按钮时没生效，排查了半天时因为prop属性没有正确填上去
这个是搜索组件

<!--
搜索公共组件

el-form-item 不要给宽度 不然 页面缩小时 label 和输入框 会上下显示 ，不给宽度 自动适配 还在一行显示
id="selectForm" 给文本设置字体大小 太大文本一行显示不下
输入框的 placeholder文本也调小 跟随 label
searchArr 格式
{
 [必填] label:' ',// form表单中 el-form-item  上的标签文本
 [必填] type:'input', // 这个el-form-item 内放什么控件 根据类型判断 输入框、选择框、双日期时间组合 等 可自行扩展
 [必填] field:'albumId', // 映射的pageQuery对象内的属性，主要用于和后端接收的字段进行映射
 [选填] width:'25%',// 宽度
 [选择框 必填] options:[ {label:'',value:''}] ,// 这个是针对选择框的属性
},
 -->
<template>
  <div>
    <el-form
        inline
        :model="pageQuery"
        size="small"
        label-width="100px"
        id="selectForm"
        class="demo-form-inline"
        ref="agSearchRef"
    >
      <el-form-item v-for="(item,index) in searchArr"
                    :key="index"
                    class="agsearch_item"
                    :prop="item.field"
                    :label="item.label"
      >
        <!--   输入框   -->
        <el-input v-if="item.type=='input'"
                  v-model="pageQuery[item.field]"
                  :placeholder="'请输入'+item.label"
                  style="font-size: 12px"
        />
        <!--   选择框     -->
        <el-select clearable
                   v-else-if="item.type=='select'"
                   v-model="pageQuery[item.field]"
                   :placeholder="'请输入'+item.label"
        >
          <el-option v-for="option in item.options"
                     :key="option.value"
                     :value="option.value+''"
                     :label="option.label"
          >
          </el-option>
        </el-select>

        <!-- 双日期时间组合 value-format 绑定的值的格式 format 显示在输入框中的格式  -->
        <div class="datetime_range" v-else-if="item.type == 'datetimeRange'">
          <el-form-item :prop="item.startTime">
            <el-date-picker
                v-model="pageQuery[item.startTime]"
                type="datetime"
                clearable
                style="width: 100%"
                value-format="yyyy-MM-DD HH:mm:ss"
                format="yyyy-MM-DD HH:mm:ss"
                placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
          <div class="datetime_rangefgx">-</div>
          <el-form-item :prop="item.endTime">
            <el-date-picker
                v-model="pageQuery[item.endTime]"
                type="datetime"
                clearable
                style="width: 100%"
                value-format="yyyy-MM-DD HH:mm:ss"
                format="yyyy-MM-DD HH:mm:ss"
                placeholder="选择日期"
            ></el-date-picker>
          </el-form-item>
        </div>

        <!--  type test       -->
        <div v-else-if="item.type=='test'">
          {{item.options}}
        </div>

      </el-form-item>
    </el-form>
    <div class="search_divider"></div>
    <div class="search_btnbox">
      <el-button size="mini" type="primary" icon="el-icon-search" @click="queryBtn()">查询</el-button>
      <el-button
          size="mini"
          icon="el-icon-refresh-right"
          type="info"
          @click="resetForm()"
      >重置</el-button>
    </div>

  </div>
</template>

<script>

export default {
  name:'ag_search',
  data(){
    return{

    }
  },
  props: {
    pageQuery: {
      type: Object,
      required: true,
    },
    searchArr: {
      type: [Array],
      required: true,
    },
  },
  methods: {
    queryBtn(){
      this.$emit("updataSearchBtn",this.pageQuery);
    },
    resetForm(){
      // this.pageQuery={};
      this.pageQuery.pn=1;
      this.pageQuery.ps=20;
      this.$refs.agSearchRef.resetFields();
      console.log("ag_search,this.pageQuery",this.pageQuery);
      this.queryBtn();
    },
  },
}

</script>

<style scoped>
.ag_search {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.agsearch_item {
  margin-right: 0;
}
/*修改el-form表单的el-form-item的label的字体大小*/
#selectForm >>> .el-form-item__label {
  font-size: 12px;
}
.search_divider {
  background-color: #dcdfe6;
  display: block;
  height: 1px;
  width: 100%;
  margin: 12px 0;
}
.search_btnbox {
  float: right;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-left: 10px;
}
.datetime_range {
  display: flex;
}
.datetime_rangefgx {
  width: 8%;
  text-align: center;
  height: 28px;
  padding: 0 3px;
}
</style>

可以看到prop设置的是父组件传递进来的:prop=“item.field”,但是我给的配置是

 {
          label: "创建时间",
          type: "datetimeRange",
          startTime: "startTime",
          endTime: "endTime"
        },

所以造成了prop属性没有赋值上去，最后我在遍历的el-form-item下有嵌套了两个el-form-item 并根据type给赋值prop 这样才可以了。
其实还有其他的解决办法。
可以直接在resetForm重置函数中直接this.pageQuery={};这个对象就全被清空了，但是如果这样，vue就会报错

e.runtime.esm.js:4605 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "pageQuery"

意思是子组件不能改变父组件通过prop传递过来的数据。
那么你如果想改变你就重新用一个对象接收父组件传递过来的，这样的话当你向父组件传递子组件收集的表单数据时，你还需要通过this.$emit(“updataSearchBtn”,this.pageQuery);把收集到的数据传递到父组件，然后父组件想后端发起搜索请求。但是我没用这个方式，直接给日期家了prop属性 此时父子是双向通信的，因为我传递进来的prop对象它们指向同一个地址，所以子组件值改变会影响到父组件。