共计 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 这个属性,那么调用办法重置的时候是找不到具体要重置的值是哪个的,总而言之言而总之,多看文档啊西八
正文完