Vue 动态表单 form-create 开源项目解决项目中复杂表单入门教程

form-create 是一个优秀的动态表单生成器，它让开发者在 Web 应用中可以以简单的配置生成复杂表单。该工具通过 JSON 数据自动生成表单，降低了开发者的学习曲线，并且能够灵活地应用于不同的业务场景。本文将带你深入了解 form-create 的基础知识，包括安装、基本使用方法和一些常用功能实例。

低代码研究员

1795人浏览 · 2024-11-20 11:47:09

低代码研究员 · 2024-11-20 11:47:09 发布

源码地址: Github | Gitee | 文档
在这里插入图片描述

安装form-create

在开始使用 form-create 之前，您需要进行安装。可以通过 npm 或者 yarn 进行快速安装：

# 使用 npm 安装
npm install @form-create/element-ui --save

# 使用 yarn 安装
yarn add @form-create/element-ui

安装完成后，您可以在项目中引入 form-create 并进行配置。以 Vue 项目为例：

import Vue from 'vue';
import ElementUI from 'element-ui';
import formCreate from '@form-create/element-ui';

Vue.use(ElementUI);
Vue.use(formCreate);

基本使用方法

安装成功后，我们可以通过 form-create 创建一个简单的表单。

<template>
  <div id="app">
    <!-- 使用 formCreate 渲染表单 -->
    <form-create :rule="rule"></form-create>
  </div>
</template>

<script>
export default {
  data() {
    // 定义表单的规则数组
    return {
      rule: [
        {
          type: 'input',
          field: 'username',
          title: '用户名',
          value: '',
          props: {
            placeholder: '请输入用户名'
          }
        },
        {
          type: 'password',
          field: 'password',
          title: '密码',
          value: '',
          props: {
            placeholder: '请输入密码'
          }
        }
      ]
    };
  }
};
</script>

在以上示例中，我们创建了一个包含用户名和密码输入框的基本表单。使用 form-create，您只需编写少量代码即可实现表单元素的自动化生成。

常用功能实例

表单验证

form-create 提供了强大的表单验证功能，您可以轻松地在字段规则中添加验证规则。

{
  type: 'input',
  field: 'email',
  title: '邮箱',
  value: '',
  props: {
    placeholder: '请输入邮箱地址'
  },
  validate: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
  ]
}

动态字段

form-create 支持动态字段，使得表单可以根据其他字段的值进行条件渲染。

{
  type: 'select',
  field: 'role',
  title: '角色',
  options: [
    { value: 'admin', label: '管理员' },
    { value: 'user', label: '用户' }
  ]
},
{
  type: 'input',
  field: 'adminCode',
  title: '管理员代码',
  value: '',
  props: {
    placeholder: '仅管理员填写'
  },
  hidden: true,
  control: [
    {
      handle: (value) => {
        return value === 'admin';
      },
      rule: [
        {
          type: 'input',
          field: 'adminCode'
        }
      ]
    }
  ]
}

复杂组件嵌套

form-create 允许嵌套多个复杂组件，可以用于构建更高级的用户界面。

{
  type: 'grid',
  columns: [
    {
      span: 12,
      rule: [
        {
          type: 'input',
          field: 'firstName',
          title: '名',
          value: '',
          props: {
            placeholder: '输入名'
          }
        }
      ]
    },
    {
      span: 12,
      rule: [
        {
          type: 'input',
          field: 'lastName',
          title: '姓',
          value: '',
          props: {
            placeholder: '输入姓'
          }
        }
      ]
    }
  ]
}

实际应用场景实例

用户注册表单

data() {
  return {
    rule: [
      {
        type: 'input',
        field: 'username',
        title: '用户名',
        value: '',
        props: {
          placeholder: '请输入用户名'
        },
        validate: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 15, message: '用户名长度在3到15个字符', trigger: 'blur' }
        ]
      },
      {
        type: 'input',
        field: 'email',
        title: '邮箱',
        value: '',
        props: {
          placeholder: '请输入邮箱地址'
        },
        validate: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      {
        type: 'password',
        field: 'password',
        title: '密码',
        value: '',
        props: {
          placeholder: '请输入密码'
        },
        validate: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      }
    ]
  };
}

调查问卷

data() {
  return {
    rule: [
      {
        type: 'radio',
        field: 'satisfaction',
        title: '您对我们的产品满意吗？',
        options: [
          { value: 'yes', label: '满意' },
          { value: 'no', label: '不满意' }
        ]
      },
      {
        type: 'checkbox',
        field: 'features',
        title: '您希望看到的功能',
        options: [
          { value: 'speed', label: '更快的速度' },
          { value: 'ui', label: '更好的UI' },
          { value: 'support', label: '更好的支持' }
        ]
      },
      {
        type: 'textarea',
        field: 'suggestions',
        title: '其他建议',
        props: {
          placeholder: '请留下您的建议'
        }
      }
    ]
  };
}