在 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
<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>