旅游型网站的建设背景,我想在泉州做网站,神一般的网页设计网站,广安市网站建设elment-plus的表单组件的标签有el-form,el-form-item。 单个el-form标签内包裹若干个el-form-item,el-form-item包裹具体的表单组件#xff0c;如输入框组件#xff0c;多选组件#xff0c;日期组件等。
el-form组件的主要作用是#xff1a;提供统一的布局给其他表单组件如输入框组件多选组件日期组件等。
el-form组件的主要作用是提供统一的布局给其他表单组件其他组件可以继承表单组件的size,以及规则校验
form表单主要属性如下
属性名说明默认值model表单数据对象—rules表单验证规则—inline行内表单模式falselabel-positionleft right label-widthrightlabel-width‘50px’ auto‘’show-message是否显示校验错误信息trueinline-message是否以行内形式展示校验信息falsestatus-icon是否在输入框中显示校验结果反馈图标falsesize表单尺寸
form-item 主要属性如下
属性名说明默认值propvalidate,resetField时使用一般和v-model值保持一致—label标签文本—
用法示例
script setup langts
import { onMounted, reactive, ref } from vue
import type { FormInstance,FormRules } from element-plusconst formRef refFormInstance()interface Good {goodName:stringstock:numbercreateDate:Datedescription:string
}const checkStock (rule: any, value: any, callback: any) {console.log(checkStock ,value)if (!value) {return callback(new Error(Please input the age))}setTimeout(() {if (!Number.isInteger(value)) {callback(new Error(Please input digits))} else {if (value 10) {callback(new Error(stock must be greater than 10))} else {callback()}}}, 1000)
}const ruleFormreactiveFormRulesGood({goodName:[{required:true,message:please input goodName,trigger:change}],stock:[{validator:checkStock}]
})const goodFormrefGood({goodName:,stock:10,createDate:new Date(),description:
});const submitForm(){formRef.value.validate((valid:Boolean){if (valid){console.log(submit success ,goodForm) ;}else{console.log(form validate error );}})
}const resetForm(){formRef.value.resetFields()
}/scripttemplateel-form :modelgoodForm status-icon label-positionleft label-widthauto refformRef :rulesruleFormel-form-item labelgoodName propgoodNameel-input v-modelgoodForm.goodName placeholderplease enter goodName/el-input/el-form-itemel-form-item labelstock propstockel-input-number v-modelgoodForm.stock :step1/el-input-number/el-form-itemel-form-item labelcreateDate propcreateDateel-date-picker typedate v-modelgoodForm.createDate formatYYYY-MM-DD clearable/el-date-picker/el-form-itemel-form-item labeldescription propdescriptionel-input typetextarea v-modelgoodForm.description placeholderplease enter description/el-input/el-form-itemel-form-itemel-button typeprimary clicksubmitFormsubmit/el-buttonel-button clickresetFormreset/el-button/el-form-item/el-form/templatestyle scoped/style https://element-plus.org/zh-CN/component/form.html#form-attributes
