在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> </el-form>
行内表单
当垂直方向空间受限且表单较简单时,可以在一行内放置表单。设置 inline
属性可以让表单域变为行内的表单域
表单验证
Form 组件提供了表单验证的功能,只需要通过 rules
属性传入约定的验证规则,并将 Form-Item 的 prop
属性设置为需校验的字段名即可。
<template> // ref: 设置ref,用以获取该组件 // rules:绑定设置的rule // prop: 设置的rule的规则属性名 <el-form ref="addForm" :model="addAppParam" :rules="addRule" label-width="150px"> <el-form-item label="微信openid" prop="wxOpenId" > <el-input v-model="addAppParam.wxOpenId" clearable style="width: 80%;"/> </el-form-item> <el-form-item label="小程序appid" prop="appId"> <el-input v-model="addAppParam.appId" clearable style="width: 80%;"/> </el-form-item> <el-form-item label="小程序环境" prop="env"> <el-select v-model="addAppParam.env" clearable > <el-option v-for="env in envOptions" :key="env.value" :value="env.value" :label="env.label"/> </el-select> </el-form-item> </el-form> // 调用submitForm方法,参数为组件的ref,校验该组件规则 <el-button type="primary" @click="submitForm('addForm')">确 认</el-button> </template> <script> export default { name: 'demo', data() { return { addAppParam: { wxOpenId: '', appId: '', env: '' }, // 设置规则 addRule: { wxOpenId: [ { required: true, message: '请输入微信openid', trigger: 'blur' } ], appId: [ { required: true, message: '请输入小程序appid', trigger: 'blur' } ], env: [ { required: true, message: '请输入小程序环境', trigger: 'blur' } ] }, } }, methods: { // 校验必填,固定写法 submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { this.addAppInfo() } else { this.addDialogVisible = true } }) }, resetForm(formName) { this.$refs[formName].resetFields() } } </script>
标签:Form,表单,ui,设置,组件,element,true,formName From: https://www.cnblogs.com/yjh1995/p/17657180.html