关于前端:关于antdesign中formModel提供的resetFields方法不生效问题

31次阅读

共计 1994 个字符,预计需要花费 5 分钟才能阅读完成。

先上代码

错误代码
    <a-form-model layout="inline" :model="queryData" @keyup.enter.native="searchQuery" ref="formM">
        <a-row :gutter="24">
          <a-col span="4">
            <a-form-model-item label="地区名称">
              <c-area-select
                placeholder="请抉择地区名称"
                :p-code="queryData.province"
                v-model="queryData.city"
                @change="cityChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="名称">
              <a-input placeholder="请输出名称" v-model="queryData.name" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="状态">
              <j-dict-select-tag placeholder="请抉择状态" dict-code="data_status" v-model="queryData.status" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <!-- <a-button @click="searchReset" style="marginRight:15px"> 重置 </a-button> -->
            <a-button @click="clearOption" style="marginRight:15px"> 重置 </a-button>
            <a-button @click="searchQuery" type="primary" icon="search"> 查问 </a-button>
          </a-col>
        </a-row>
      </a-form-model>
      
      //methods
 clearOption() {this.$refs.formM.resetFields()
      console.log(this.$refs.formM)
      console.log(this.$refs.formM.resetFields)
      }
    }

页面报错信息如下:

此时点击重置 button 是不会失效的

改过后的代码如下
<a-form-model layout="inline" :model="queryData" @keyup.enter.native="searchQuery" ref="formM">
        <a-row :gutter="24">
          <a-col span="4">
            <a-form-model-item label="地区名称" prop="city">
              <c-area-select
                placeholder="请抉择地区名称"
                :p-code="queryData.province"
                v-model="queryData.city"
                @change="cityChange"
              />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="名称" prop="name">
              <a-input placeholder="请输出名称" v-model="queryData.name" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <a-form-model-item label="状态" prop="status">
              <j-dict-select-tag placeholder="请抉择状态" dict-code="data_status" v-model="queryData.status" />
            </a-form-model-item>
          </a-col>
          <a-col span="4">
            <!-- <a-button @click="searchReset" style="marginRight:15px"> 重置 </a-button> -->
            <a-button @click="clearOption" style="marginRight:15px"> 重置 </a-button>
            <a-button @click="searchQuery" type="primary" icon="search"> 查问 </a-button>
          </a-col>
        </a-row>
      </a-form-model>
这个问题困扰了还有一段时间,其实只有认真看文档就能发现,官网示例的代码中每个 item 也是加有 prop 的

由此可见,如果不给 formitem 加 prop 这个属性,那么调用办法重置的时候是找不到具体要重置的值是哪个的,总而言之言而总之,多看文档啊西八

正文完
 0