# 表单 Form

具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。

# 基本用法

基本用法

包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。

<title>基本用法</title>
<describe>包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。</describe>
<template>
    <hc-form :model="formData" label-width="95px">
      <hc-form-groups>
        <hc-form-group>
          <hc-form-row>
            <hc-form-cell prop="name" label="所属项目">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
            <hc-form-cell prop="name" label="应用范围">
              <hc-textbox v-model="formData.scope"/>
            </hc-form-cell>
          </hc-form-row>
        </hc-form-group>
      </hc-form-groups>
    </hc-form>
</template>
<script>
export default {
    data: function () {
        return {
          formData: {
            name: '凤凰城三期',
            scope: '--'
          }
        }
    }
}
</script>

# 分组表单

分组表单

包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。

<title>分组表单</title>
<describe>包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。</describe>
<template>
    <hc-form :model="formData">
      <hc-form-groups>
        <hc-form-group  label="含分组标题">
          <hc-form-row>
            <hc-form-cell prop="name" label="所属项目">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
            <hc-form-cell prop="name" label="应用范围">
              <hc-textbox v-model="formData.scope"/>
            </hc-form-cell>
          </hc-form-row>
        </hc-form-group>
        <hc-form-group>
          <hc-form-row>
            <hc-form-cell prop="name" label="所属项目">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
            <hc-form-cell prop="name" label="应用范围">
              <hc-textbox v-model="formData.scope"/>
            </hc-form-cell>
          </hc-form-row>
        </hc-form-group>
      </hc-form-groups>
    </hc-form>
</template>
<script>
export default {
    data: function () {
        return {
          formData: {
            name: '凤凰城三期',
            scope: '--'
          }
        }
    }
}
</script>

# 分区表单

分区表单

包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。

<title>分区表单</title>
<describe>包括各种表单项,比如输入框、选择器、开关、单选框、多选框等。</describe>
<template>
    <hc-form :model="formData">
          <hc-form-regions>
            <hc-form-region label="基本信息">
              <hc-form-groups>
                <hc-form-group>
                  <hc-form-row>
                    <hc-form-cell prop="name" label="所属项目">
                      <hc-textbox v-model="formData.name"/>
                    </hc-form-cell>
                    <hc-form-cell prop="name" label="应用范围">
                      <hc-textbox v-model="formData.scope"/>
                    </hc-form-cell>
                  </hc-form-row>
                </hc-form-group>
              </hc-form-groups>
            </hc-form-region>
            <hc-form-region label="价格信息">
              <hc-form-groups>
                <hc-form-group label="含分组标题">
                  <hc-form-row>
                    <hc-form-cell prop="name" label="计价方式">
                      <hc-textbox v-model="formData.name"/>
                    </hc-form-cell>
                    <hc-form-cell prop="name" label="面价建筑单价">
                      <hc-textbox v-model="formData.scope"/>
                    </hc-form-cell>
                  </hc-form-row>
                </hc-form-group>
              </hc-form-groups>
            </hc-form-region>
          </hc-form-regions>
        </hc-form>
</template>
<script>
export default {
    data: function () {
        return {
          formData: {
            name: '凤凰城三期',
            scope: '--'
          }
        }
    }
}
</script>

# 表单校验

表单校验

在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。

<title>表单校验</title>
<describe>在防止用户犯错的前提下,尽可能让用户更早地发现并纠正错误。</describe>
<template>
    <hc-form ref="form" :model="formData" :rules="formRules">
      <hc-form-regions>
        <hc-form-region label="基本信息">
          <hc-form-groups>
            <hc-form-group label="价格信息">
              <hc-form-row>
                <hc-form-cell prop="name" label="所属项目">
                  <hc-textbox v-model="formData.name"/>
                </hc-form-cell>
                <hc-form-cell prop="scope" label="应用范围">
                  <hc-textbox v-model="formData.scope"/>
                </hc-form-cell>
              </hc-form-row>
              <hc-form-row>
                <hc-form-cell prop="name" label="生效日期">
                  <hc-textbox v-model="formData.name"/>
                </hc-form-cell>
                <hc-form-cell prop="scope" label="失效日期">
                  <hc-textbox v-model="formData.scope"/>
                </hc-form-cell>
              </hc-form-row>
            </hc-form-group>
            <hc-form-group label="价格信息">
              <hc-form-row>
                <hc-form-cell prop="name">
                  <hc-textbox v-model="formData.name" label="计价方式"/>
                </hc-form-cell>
                <hc-form-cell prop="name" label="按揭银行">
                  <hc-textbox v-model="formData.name"/>
                </hc-form-cell>
              </hc-form-row>
            </hc-form-group>
          </hc-form-groups>
        </hc-form-region>
        <hc-form-region label="计价方式">
          <hc-form-groups>
            <hc-form-group label="价格信息">
              <hc-form-row>
                <hc-form-cell prop="name" label="按揭银行">
                  <hc-textbox v-model="formData.name"/>
                </hc-form-cell>
                <hc-form-cell prop="name">
                  <hc-textbox v-model="formData.name"/>
                </hc-form-cell>
              </hc-form-row>
            </hc-form-group>
          </hc-form-groups>
        </hc-form-region>
      </hc-form-regions>
      <hc-form-groups>
        <hc-form-group label="价格信息">
          <hc-form-row>
            <hc-form-cell prop="name" label="价格信息">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
            <hc-form-cell prop="name">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
          </hc-form-row>
        </hc-form-group>
      </hc-form-groups>
      <hc-form-groups>
        <hc-form-group>
          <hc-form-row>
            <hc-form-cell prop="name" label="价格信息">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
            <hc-form-cell prop="name">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
          </hc-form-row>
        </hc-form-group>
      </hc-form-groups>
      <hc-toolbar :items="buttons" align="left"/>
    </hc-form>
</template>
<script>
export default {
    data: function () {
      var me = this
        return {
          formData: {
              name: '',
              scope: ''
            },
            formRules: {
              name: [
                { required: true, message: '请输入所属项目', trigger: 'blur' },
                { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
              ],
              scope: [{ required: true, message: '请输入应用范围', trigger: 'blur' }]
            },
            buttons: [
              {
                name: 'save',
                label: '表单校验',
                click() {
                  me.$refs.form.validate().then(
                    () => {
                      console.log('校验成功!')
                    },
                    err => {
                      console.error('校验失败', err.message)
                    }
                  )
                }
              },
              {
                name: 'reset',
                label: '表单重置',
                click(e) {
                  me.$refs.form.reset()
                }
              },
              {
                name: 'resetValidate',
                label: '表单重置校验',
                click(e) {
                  me.$refs.form.resetValidate()
                }
              }
            ]
        }
    }
}
</script>

# 自定义校验规则

基本用法

可设置表单的自定义校验规则进行校验。

<title>基本用法</title>
<describe>可设置表单的自定义校验规则进行校验。</describe>
<template>
    <hc-form :model="formData" label-width="95px" :rules="formRules">
      <hc-form-groups>
        <hc-form-group>
          <hc-form-row>
            <hc-form-cell prop="name" label="所属项目">
              <hc-textbox v-model="formData.name"/>
            </hc-form-cell>
            <hc-form-cell prop="scope" label="应用范围">
              <hc-textbox v-model="formData.scope"/>
            </hc-form-cell>
          </hc-form-row>
        </hc-form-group>
      </hc-form-groups>
    </hc-form>
</template>
<script>
export default {
    data: function () {
        const nameValidator = function(value, resolve, reject) {
          const val = value.value;
          if(!val){
            reject('请输入所属项目')
          }
          if(val.length >5 || val.length <3){
            reject('所属项目长度在 3 到 5 个字符')
          }
          resolve()
        }
        const scopeValidator = function(value, resolve, reject) {
          const val = value.value;
          if(!val){
            reject('请输入应用范围')
          }
          if(val.length>5||val.length<3){
            reject('应用范围长度在 3 到 5 个字符')
          }
          resolve()
        }
        return {
          formData: {
            name: '凤凰城三期',
            scope: '--'
          },
          formRules: {
            name: [{ required: true, validator:nameValidator, trigger: 'blur' }],
            scope: [{ required: true, validator:scopeValidator, trigger: 'blur' }]
          },
        }
    }
}
</script>

# 属性及事件

# HcForm 属性

名称 说明 类型 可选值 默认值
model 表单数据 object -- --
rules 数据校验规则 object -- --
label-width 标签宽度 string -- '90px'

# HcForm 插槽

名称 说明
default 默认内容

# HcFormRegions 插槽

名称 说明
default 默认内容

# HcFormRegion 属性

名称 说明 类型 可选值 默认值
label 分区标题 string -- --

# HcFormRegion 插槽

名称 说明
default 默认内容

# HcFormGroups 插槽

名称 说明
default 默认内容

# HcFormGroup 属性

名称 说明 类型 可选值 默认值
label 分组标题 string -- --

# HcFormGroup 插槽

名称 说明
default 默认内容

# HcFormRow 插槽

名称 说明
default 默认内容

# HcFormCell 属性

名称 说明 类型 可选值 默认值
label 单元格标题 string -- --
prop 绑定属性名称 string -- --
required 是否必填 boolean -- false
span 在布局内所占比例 number 1 ~ 24 12

# HcFormCell 插槽

名称 说明
default 默认内容