element-ui（Form 表单）

yjh1995 / 2023-08-25 / 原文

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