# 表单 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" :show-colon="true">
<hc-form-groups>
<hc-form-group label="含分组标题" :tooltip="groupTooltip" :tips-type="groupTipsType">
<hc-form-row>
<hc-form-cell prop="name" label="所属项目">
<hc-textbox v-model="formData.name"/>
</hc-form-cell>
<hc-form-cell prop="name" label="应用范围" tooltip="至少需填写一个应用范围">
<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: '--'
},
groupTooltip: '分组提示说明',
groupTipsType: 'always-show'
}
}
}
</script>
# 分区表单
分区表单
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
<title>分区表单</title>
<describe>包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。</describe>
<template>
<hc-form :model="formData" :show-colon="true">
<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" :show-colon="true">
<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: function() {
me.$refs.form.validate().then(
function() {
console.log('校验成功!')
},
function(err) {
console.error('校验失败', err.message)
}
)
}
},
{
name: 'reset',
label: '表单重置',
click: function(e) {
me.$refs.form.reset()
}
},
{
name: 'resetValidate',
label: '表单重置校验',
click: function(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 () {
var nameValidator = function(value, resolve, reject) {
var val = value.value;
if(!val){
reject('请输入所属项目')
}
if(val.length >5 || val.length <3){
reject('所属项目长度在 3 到 5 个字符')
}
resolve()
}
var scopeValidator = function(value, resolve, reject) {
var 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 |
label-align | 标签对齐方式 | string | -- | left |
theme | 表单类型 | string | default/toggle | default |
# HcForm 插槽
| 名称 | 说明 |
|---|---|
default | 默认内容 |
# HcFormRegions 插槽
| 名称 | 说明 |
|---|---|
default | 默认内容 |
# HcFormRegion 属性
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
label | 分区标题 | string | -- | -- |
# HcFormRegion 插槽
| 名称 | 说明 |
|---|---|
default | 默认内容 |
# HcFormGroups 插槽
| 名称 | 说明 |
|---|---|
default | 默认内容 |
# HcFormGroup 属性
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
label | 分组标题 | string | -- | -- |
tooltip | 表头提示说明 | string | -- | `` |
tips-type | 表头提示说明类型 | string | popover / always-show | popover |
# HcFormGroup 插槽
| 名称 | 说明 |
|---|---|
default | 默认内容 |
# HcFormRow 插槽
| 名称 | 说明 |
|---|---|
default | 默认内容 |
# HcFormCell 属性
| 名称 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
label | 单元格标题 | string | -- | -- |
tooltip | 气泡提示内容 | string | -- | -- |
prop | 绑定属性名称 | string | -- | -- |
required | 是否必填 | boolean | -- | false |
span | 在布局内所占比例 | number | 1 ~ 24 | 12 |
# HcFormCell 插槽
| 名称 | 说明 |
|---|---|
default | 默认内容 |
登录