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对象它们指向同一个地址,所以子组件值改变会影响到父组件。