# Form 表单

根据JSON Scheme配置自动生成表单

## 基础用法

配置`list`属性设置JSON Scheme配置列表

<div class="code-snippet-box">

::: snippet `v-model`值动态改变，支持初始化

```html
<template>
  <div>
    <pre class="demo-model">{{ model }}</pre>
    <z-form v-model="model" :list="list"></z-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: { name: '', age: '' },
      list: [
        { type: 'el-input', label: '姓名', key: 'name' },
        { type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
      ]
    }
  } 
}
</script>
```

:::

::: snippet `span`设置行占位

```html
<template>
  <z-form v-model="model" :list="list" :span="12"></z-form>
</template>

<script>
export default {
  data() {
    return {
      model: { name: '', age: '' },
      list: [
        { type: 'el-input', label: '姓名', key: 'name' },
        { type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
      ]
    }
  } 
}
</script>
```

:::

::: snippet `label-width`设置标题宽度

```html
<template>
  <z-form v-model="model" :list="list" label-width="60px"></z-form>
</template>

<script>
export default {
  data() {
    return {
      model: { name: '', age: '' },
      list: [
        { type: 'el-input', label: '姓名', key: 'name' },
        { type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
      ]
    }
  } 
}
</script>
```

:::

</div>

## 表单校验

配置`list`的配置项中的`rules`

<div class="code-snippet-box">

::: snippet `v-model`值动态改变，支持初始化

```html
<template>
  <div>
    <z-form ref="form" v-model="model" :list="list" :span="12" @validate="onValidate" @reset="onReset"></z-form>
    <el-button size="small" type="primary" @click="submit">提交</el-button>
    <el-button size="small" plain @click="reset">重置</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: { name: '', age: '' },
      list: [
        { type: 'el-input', label: '姓名', key: 'name', rules: [{ required: true, message: '请输入', trigger: 'change' }] },
        { type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' } },
      ]
    }
  },
  methods: {
    onValidate(valid, model) {
      if (valid) {
        console.log(model);
      }
    },
    onReset() {
      Object.keys(this.model).forEach(key => {
        this.model[key] = '';
      });
    },
    submit() {
      this.$refs.form.validate();
    },
    reset() {
      this.$refs.form.reset();
    }
  }
}
</script>
```

:::

</div>

## 表单分组

将表单内容进行分组显示

::: snippet 表单配置项的`group`值设置分组

```html
<template>
  <div>
    <pre class="demo-model">{{ model }}</pre>
    <z-form v-model="model" :list="list" :span="8" label-width="80px"></z-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: { name: '', age: '', company: '', address: '', time: '', salary: '' },
      list: [
        {
          group: { title: '基础信息' },
          list: [
            { type: 'el-input', label: '姓名', key: 'name', rules: [{ required: true, message: '请输入', trigger: 'change' }], span: 12 },
            { type: 'el-input-number', label: '年龄', key: 'age', props: { 'controls-position': 'right' }, span: 12 },
          ],
        },
        {
          group: { title: '工作信息' },
          list: [
            { type: 'el-input', label: '公司', key: 'company' },
            { type: 'el-input', label: '地址', key: 'address' },
            { type: 'el-input', label: '时限', key: 'time' },
            { type: 'el-input', label: '薪资', key: 'salary' },
          ],
        },
      ]
    }
  },
}
</script>
```

:::

## 自定义渲染

对于一些特殊渲染逻辑的表单项，可以进行自定义渲染

<div class="code-snippet-box">

::: snippet 通过`render`方法渲染

```html
<template>
  <div>
    <pre class="demo-model">{{ model }}</pre>
    <z-form v-model="model" :list="list" label-width="80px"></z-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: { name: '', age: '' },
      list: [
        { type: 'el-input', label: '姓名', key: 'name' },
        { type: 'el-input', label: '年龄', key: 'age', type: (h, { model, config }) => { return h('el-input-number', config, model.age) }, props: { 'controls-position': 'right' } },
      ]
    }
  },
}
</script>
```

:::

::: snippet 通过`slot`插槽渲染

```html
<template>
  <div>
    <pre class="demo-model">{{ model }}</pre>
    <z-form v-model="model" :list="list" label-width="80px">
      <template slot="name">
        <el-radio v-model="model.name" label="zs">张三</el-radio>
        <el-radio v-model="model.name" label="ls">李四</el-radio>
      </template>
      <template slot="age">
        <el-slider v-model="model.age"></el-slider>
      </template>
    </z-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: { name: 'zs', age: 0 },
      list: [
        { type: 'el-input', label: '姓名', key: 'name' },
        { type: 'el-input', label: '年龄', key: 'age' },
      ]
    }
  },
}
</script>
```

:::

</div>

## API

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value | 值 | Object | - | -
list | JSON Scheme配置项列表 | Array | - | []
formClass | 表单class | String | - | -
titleClass | 标题class | String | - | -
contentClass | 内容class | String | - | -
itemClass | 表单项class | String | - | -
groupClass | 表单分组class | String | - | -
labelWidth | 表单项标题宽度 | String | - | -
labelPosition | 表单项标题位置 | String | - | top
size | 大小 | String | - | small
span | 占位 | Number | - | 24

## Events 事件

事件名称|说明|回调参数
-|-|-
input | 表单值变化 | 表单model
validate | 校验表单 | 是否通过,表单model