从哪里设置网站关键词,湖州建设网站制作,邯郸企业网站建设价格,安徽省建设监理协会新网站一、表单#xff1a; 二、代码——拿官方的代码举例(做了一些小改动)#xff1a;
改动#xff1a;model绑定的字段#xff0c;由form改为queryParams
ref绑定的字段form改为queryFrom
注#xff1a;model绑定的这个字段用来做数据双向绑定的
注#xff1a;ref绑定的这…一、表单 二、代码——拿官方的代码举例(做了一些小改动)
改动model绑定的字段由form改为queryParams
ref绑定的字段form改为queryFrom
注model绑定的这个字段用来做数据双向绑定的
注ref绑定的这个字段用来清空表单数据的
el-form refqueryForm :modelqueryParams label-width80pxel-form-item label活动名称 propnameel-input v-modelqueryParams.name/el-input/el-form-itemel-form-item label活动区域 propregionel-select v-modelqueryParams.region placeholder请选择活动区域el-option label区域一 valueshanghai/el-optionel-option label区域二 valuebeijing/el-option/el-select/el-form-itemel-form-item label活动时间 propdateel-col :span11el-date-picker typedate placeholder选择日期 v-modelqueryParams.date1 stylewidth: 100%;/el-date-picker/el-colel-col classline :span2-/el-colel-col :span11el-time-picker placeholder选择时间 v-modelqueryParams.date2 stylewidth: 100%;/el-time-picker/el-col/el-form-itemel-form-item label即时配送 propdeliveryel-switch v-modelqueryParams.delivery/el-switch/el-form-itemel-form-item label活动性质 proptypeel-checkbox-group v-modelqueryParams.typeel-checkbox label美食/餐厅线上活动 nametype/el-checkboxel-checkbox label地推活动 nametype/el-checkboxel-checkbox label线下主题活动 nametype/el-checkboxel-checkbox label单纯品牌曝光 nametype/el-checkbox/el-checkbox-group/el-form-itemel-form-item label特殊资源 propresourceel-radio-group v-modelqueryParams.resourceel-radio label线上品牌商赞助/el-radioel-radio label线下场地免费/el-radio/el-radio-group/el-form-itemel-form-item label活动形式 propdescel-input typetextarea v-modelqueryParams.desc/el-input/el-form-itemel-form-itemel-button typeprimary clickonSubmit立即创建/el-buttonel-button取消/el-button/el-form-item
/el-form
三、数据初始化 data() {return {queryParams: {name: ,region: ,date1: ,date2: ,delivery: false,type: [],resource: ,desc: }}},
注这里不要图省事直接写queryParams:{},这样的话可能会产生一些问题由于视图模型模型都没有他页面渲染的时候你改变数据的话就找不到这个模型了 如下图
重置表单时输入框下拉框输入的内容就无法呈现。 四、表单重置另外要加prop字段不然重置方法、表单校验方法不生效
像上面的活动时间一个表单项绑定两个不同的值我们可以直接用this.queryParam.字段1null进行重置 /** 重置按钮操作 */resetQuery() {this.resetForm(queryForm);this.queryParams.date1null;this.queryParams.date2null;},
