郑州做网站优化地址,seo臻系统,湖北营销网站建设设计,百度云 免费 网站主机摘要#xff1a;本文将介绍如何使用vue和elment ui组件库实现一个简单的动态表单生成的Demo。主要涉及两个.vue文件的书写#xff0c;一个是动态表单生成的组件文件#xff0c;一个是使用该动态表单生成的组件。 1.动态表单生成组件
这里仅集成了输入框、选择框、日期框三种…摘要本文将介绍如何使用vue和elment ui组件库实现一个简单的动态表单生成的Demo。主要涉及两个.vue文件的书写一个是动态表单生成的组件文件一个是使用该动态表单生成的组件。 1.动态表单生成组件
这里仅集成了输入框、选择框、日期框三种类型的表单项
其他类型的表单元素比如单选框、复选框等也可以根据需要进行类似的处理。
可以动态计算每一行放置的表单数。
templatedivel-form :modeldata :rulesrules :label-widthlabelWidth :disabledformDisabledel-row :gutter10 styledisplay: flex; flex-wrap: wraptemplate v-for(field, index) in formFieldsel-col :keyindex :spancalculateSpanSize(field)el-form-item:propfield.name:labelfield.label:rulesfield.rules:requirefield.require ? field.required() : falsev-bindfield.bindel-inputv-iffield.type text:typefield.type:idfield.name:namefield.namev-modeldata[field.name]:style{ width: field.width || 100% }/el-selectv-else-iffield.type select:idfield.namev-modeldata[field.name]:style{ width: field.width || 100% }el-optionv-for(option, optionIndex) in field.options:keyoptionIndex:valueoption.value:labeloption.label:style{ width: field.width || 100% }{{ option.label }}/el-option/el-selectel-date-pickerv-else-iffield.type datev-modeldata[field.name]:typefield.typeplaceholder选择日期:style{ width: field.width || 100% }/el-date-picker/el-form-item/el-col!-- 其他类型的表单元素比如单选框、复选框等也可以根据需要进行类似的处理 --/template/el-rowel-rowel-button typesuccess clicksubmitForm提交/el-button/el-row/el-form/div
/templatescript
export default {name: MyFrom,props: {labelWidth: {type: String,default: 100px},rules: {type: Object,default: () {}},formFields: {type: Array,default: () []},data: {type: Object,default: () {}},spanSize: {type: Number,default: 2,validator: value {return value 5}},disabled: {type: Boolean,default: false}},data() {return {}},created() {},computed: {formDisabled() {return typeof disabled function ? this.disabled() : this.disabled}},methods: {submitForm() {// 处理表单提交逻辑console.log(Form Data:, this.data)this.$parent.submintData(this.data)},calculateSpanSize(item) {const span item.span || 1const spanTemp (24 / this.spanSize) * spanreturn spanTemp 24 ? 24 : spanTemp}}
}
/script
2.使用动态表单的父组件
1.引入动态表单生成组件
2.对表单的属性进行配置
3.点击按钮调用父组件的提交数据函数打印表单提交数据看数据是否绑定成功
templatediv stylewidth: 800pxmy-form :form-fieldsformFields :dataformData :span-size2/my-form/div
/templatescript
import MyForm from ./MyForm.vueconst defaultFormData {name: ,gender: ,birthday: ,enabled: true,address: ,id:
}export default {name: HelloWorld,components: { MyForm },props: {msg: String},data() {return {isEdit: false,visible: false,formFields: [{type: text,label: 姓名,name: name,rules: [{ required: true, trigger: blur, message: 请输入姓名 }],},{type: select,label: 性别,name: gender,options: [{ label: 男, value: 1 },{ label: 女, value: 0 }]},{ type: date, label: 生日, name: birthday },{type: text,label: 家庭地址,name: address,rules: [{ required: true, trigger: blur, message: 请输入家庭地址 }],}// 可根据需要添加更多的表单字段],formData: Object.assign({}, defaultFormData)}},methods: {submintData() {console.log(11111 JSON.stringify(this.formData))}}
}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped langscss
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style提交结果 3.思考
1.在设计动态表单生成组件时可以使用component标签改进而不是为每一种类型的表单项都写一个if判断毕竟表单项类型比较多后期会对这个点进行改进
2.提交按钮可以放到父组件动态表单生成组件就只负责生成表单以及绑定数据等逻辑的操作。
3.当你在一个 el-row 中包含多个 el-col列时你可以使用 gutter 属性来设置列之间的空隙以增加页面的可读性和美观度。
