先上代码
错误代码
<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>