用 vjdesign 助力 element 表单配置，快速打造动态表单！

2023-10-10 15:58:19

在当今数字时代，表单无处不在，它们是收集和处理数据的基本工具。为了满足不同场景的需求，我们需要构建各种各样的表单，而 element 表单因其强大的功能和丰富的组件深受广大开发者的青睐。

然而，传统的 element 表单配置过程较为繁琐，需要编写大量的代码，并且对于非技术人员来说，配置表单是一项艰巨的任务。为了解决这一难题，vjdesign 应运而生，它是一款可视化表单设计工具，可以帮助我们轻松构建 element 表单。

vjdesign 的优势

可视化设计：vjdesign 采用拖拽式设计界面，无需编写任何代码，即可轻松创建和管理表单。
丰富的组件：vjdesign 提供了丰富的表单组件，包括文本框、单选框、复选框、下拉框、日期选择器等，满足不同场景的表单需求。
简化配置：vjdesign 可以将表单设计结果导出为 json 数据，然后通过 jformer 组件进行渲染，从而简化了 element 表单的配置过程。

如何使用 vjdesign 简化 element 表单配置

安装 vjdesign

npm install -g vjdesign

创建表单设计项目

vjdesign init my-form

打开表单设计器

cd my-form
vjdesign start

拖拽组件构建表单

在表单设计器中，您可以通过拖拽组件来构建表单。您可以选择不同的组件，并设置组件的属性，如标签、默认值、校验规则等。

导出表单设计结果

表单设计完成后，您可以点击“导出”按钮，将表单设计结果导出为 json 数据。

使用 jformer 渲染表单

import jformer from 'jformer';

const schema = require('./form-schema.json');

const form = jformer.create(schema);

document.body.appendChild(form);

示例代码

以下是一个使用 vjdesign 和 jformer 构建的简单表单示例：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/jformer/dist/jformer.umd.js"></script>
</head>
<body>
  <div id="app">
    <j-form ref="form" :schema="schema" @submit="onSubmit"></j-form>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data() {
        return {
          schema: require('./form-schema.json')
        }
      },
      methods: {
        onSubmit(data) {
          console.log(data);
        }
      }
    })
  </script>
</body>
</html>