# Schema Form 方案表单

通过配置JSON Schema的方式快速生成一个表单

## 基础用法

::: snippet 预置了许多业务逻辑，避免重复维护相同的业务逻辑

```html
<template>
  <div>
    <div>{{ form }}</div>
    <z-schema-form v-model="form" :schema="schema" @submit="onSubmit" @cancel="onCancel">
      <template #error-name>
        <div><span>请输入</span><el-tag size="mini">格式正确</el-tag><span>的姓名</span></div>
      </template>
      <template #label-packages>
        <el-tooltip content="详情" placement="top" effect="light">
          <i class="el-icon-question"></i>
        </el-tooltip>
        <span>包裹</span>
      </template>
    </z-schema-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '张三',
        age: 27,
        address: '上海市青浦区华新镇纪鹤公路1988号',
        packages: ['零食'],
        info: {
          mobile: '18888888888',
        }
      },
      schema: {
        props: { labelWidth: '70px', size: 'small', span: 12 },
        items: [
          { is: 'el-input', prop: 'name', label: '姓名', rules: [{ required: true, message: '请输入姓名' }] },
          { is: 'el-input-number', prop: 'age', label: '年龄' },
          { is: 'el-input', prop: 'info.mobile', label: '电话' },
          { is: 'el-divider', props: { 'content-position': 'left' }, render: '收货信息', span: 24, labelWidth: '0px' },
          { is: 'el-input', props: { type: 'textarea' }, prop: 'address', label: '住址', span: 24 },
          {
            is: 'el-checkbox-group',
            prop: 'packages',
            label: '包裹',
            children: [
              { is: 'el-checkbox', props: { label: '零食' } },
              { is: 'el-checkbox', props: { label: '手机' } },
              { is: 'el-checkbox', props: { label: '电脑' } },
            ],
            span: 24
          },
        ]
      },
    };
  },
  methods: {
    onSubmit(value) {
      console.log(value);
    },
    onCancel() {
      console.log('cancal');
    }
  }
};
</script>
```

:::