表单项（form-item）

封装el-col与el-form-item，减少表单布局中冗余代码。

自定义表单项

支持包裹基础组件，比如输入框、选择器、开关、单选框、多选框等。

立即创建 重置

<itv-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
  <itv-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </itv-form-item>
  <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  <el-button @click="resetForm('ruleForm')">重置</el-button>
</itv-form>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('success submit');
          } else {
            console.log('error submit');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

Expand Copy Copy

Attributes

参数	说明	类型	可选值	默认值
span	间距，封装el-row组件	number	—	—
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	—
required	是否必填，如不设置，则会根据校验规则自动生成	boolean	—	false
rules	表单验证规则	object，array	—	-
error	表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息	string	—	-
label	标签文本	string	—	—
label-width	表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto 。	string	—	—
show-message	是否显示校验错误信息	boolean	—	true
inline-message	是否以行内形式展示校验信息	boolean	—	false