前端框架 ：vue2.x
第三方ui组件：ElementUI
操作系统：windows
浏览器：chrome 谷歌
问题描述
表单使用中，没有在data中提前声明参数，当数据回显时，表单无法输入
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="文件路径" prop="path">
<el-input v-model="queryParams.path" placeholder="请输入文件路径" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="创建时间" prop="createTime">
<el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
</el-form-item>
</el-form>
<script>
export default {
created(){
this.queryParams.path="http"
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
},
}
},
methods: {
/**搜索按钮操作**/
handleQuery() {
console.log(this.queryParams)
},
}
}
</script>
解决方法
- 方法1：如果在data中提前声明参数path，当数据回显时，表单可以输入
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
path:''
},
}
},
- 方法2：如果在data中不提前声明参数，那么在数据回显时，使用
Object.assign()
created(){
this.queryParams= Object.assign({},this.queryParams,{path:'gttp'})
},
data() {
return {
queryParams: {
pageNo: 1,
pageSize: 10,
},
}
},
结论
关于表单初始化数据要不要在data中提前声明，声不声名都会走响应式系统，例如不声明，表单不填写数据，新增接口是不会出现该参数的，但是，如果涉及到更新接口，页面表单会回显数据，那么要注意赋值表单的方法，比如this.queryParams.path，由于vue2对后添加的数据不会劫持，所以，要么表单参数在data中提前声明，要么用Object.assign()的方法。
