alloy-form

alloy-form-vue一个简单实用的通过 JSONSchema 配置， 实现 Vue 中后台 表单解决方案。

它上手简单容易操作，但是可以满足我们各种复杂的表单场景需求，支持自定义组件接入。同时可以通过配置支持表单联动，表单校验等复杂功能。

文档地址

安装

npm install alloy-form-vue
yarn add alloy-form-vue
pnpm install alloy-form-vue

简单的 demo

<script setup lang="ts">
import { AlloyForm } from 'alloy-form-vue';

const schema = {
  type: 'object',
  title: '简单的 demo',
  description: '简单的 demo',
  itemProps: {
    bordered: false,
    width: '500px',
  },
  properties: {
    name: {
      label: '姓名',
      format: 'input',
      props: {
        placeholder: '请输入姓名',
        type: 'string',
      },
    },
    age: {
      label: '年龄',
      format: 'input',
      props: {
        placeholder: '请输入年龄',
        type: 'number',
      },
    },
  },
};
</script>

<template>
  <div style="width: 600px">
    <AlloyForm :schema="schema" :formData="formData" :components="{ Input, Select }" ref="alloyFormRef" />
  </div>
</template>