# Form 表单

不同于常规Form组件，本组件采用配置列表的方式实现表单快速配置

## 基础用法

配置项list中通过type可以配置任意组件，不受框架限制

:::snippet 使用`list`属性设置数据源，列表项中的`type`指定组件类型，每一项都已设置为**el-form-item**的子组件，通过`rules`配置校验规则

```html
<template>
  <eagle-form ref="form" :list="formList" @submit="handleSubmit" @cancel="handleCancel" style="width: 500px;" :showButtonGroup="false"></eagle-form>
</template>

<script>
export default {
  data() {
    return {
      formList: [
        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] } },
        { type: 'el-input', key: 'postcode', label: '邮编', span: 12, tip: { content: '邮政编码', placement: "left" } },
        { type: 'el-input', key: 'number', label: '楼栋号', span: 12, visible: (model) => model.address === 'H' },
      ]
    }
  },
  methods: {
    handleSubmit(value) {
      console.log(value)
    },
    handleCancel() {
      this.$refs.form.reset()
      console.log('cancel!')
    }
  }
}
</script>
```

:::

## 分组

对配置项进行分组

:::snippet 在配置项属性中设置`group`参数，没有设置分组的配置项默认归为`基本信息`分组

```html
<template>
  <eagle-form :list="formList" style="width: 500px;"></eagle-form>
</template>

<script>
export default {
  data() {
    return {
      formList: [
        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
        { type: 'el-input', key: 'gender', label: '性别', group: { label: '身体状况', icon: 'edit' } },
        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '邮政编码', placement: "left" }, group: '详细地址' },
        { type: 'el-input', key: 'number', label: '楼栋号', group: '详细地址' },
      ]
    }
  }
}
</script>
```

:::

## 自定义分组

有些时候默认的分组样式并不能满足项目需求，因此这里支持自定义

:::snippet 使用`Object`对象的方式配置分组信息，并在组件中使用具名插槽`slot`配置分组标题

```html
<template>
  <eagle-form :list="formList" style="width: 500px;">
    <template #group-not-bad="{ label }">
      <div style="padding: 10px 0px;border-bottom: 1px dashed #aaa;display: flex;justify-content: space-between;">
        <span>哎哟 - {{ label }} - 不错哦</span>
        <el-button size="mini" type="primary">这是一个按钮</el-button>
      </div>
    </template>
  </eagle-form>
</template>

<script>
export default {
  data() {
    return {
      formList: [
        { type: 'el-input', key: 'name', label: '名称', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的' },
        { type: 'eagle-select', key: 'address', label: '住址', props: { dataSource: [{ label: '大街上', value: 'S' }, { label: '小区里', value: 'H' }] }, group: '详细地址' },
      ]
    }
  }
}
</script>
```

:::

## Attribute 属性

参数|说明|类型|可选值|默认值
-|-|-|-|-
value / v-model |	绑定值 | Object | - | -
list | 表单项配置列表 | Array | - | []

## Methods 方法

方法名|说明|参数
-|-|-
reset | 重置表单 | -

## Events 事件

事件名称|说明|回调参数
-|-|-
change | 表单model发生变化时触发 | model对象
submit | 点击表单提交按钮时触发 | model对象
cancel | 点击表单取消按钮时触发 | -

## List 表单项配置列表

参数|说明|类型|可选值|默认值
-|-|-|-|-
type | 组件类型 | String | - | el-input
key | 参数名 | String | - | -
label | 参数标签 | String | - | -
props | 组件参数 | Object,Function(model: object)) | - | {}
style | 组件样式 | Object | - | { width: "100%" }
on | 组件事件 | Object,Function(model: object) | - | {}
visible | 组件v-if状态 | Boolean,Function(model: object) | - | true
show | 组件v-show状态 | Boolean,Function(model: object) | - | true
rules | 组件校验规则 | Object,Array | - | -
tip | 组件提示框 | Object,String | - | {}