# Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
v2.7.0以上版本支持。

# 初始化

单独引入时：在入口js文件处引入

import { Form,FormItem } from '@xiaoe/sense'
import '@xiaoe/sense/static/index.css'
Vue.use(Form);
Vue.use(FormItem);

1
2
3
4

# 效果

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

# 典型表单

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

填写课程名称有利于快速查找

单节课

系列课

真实姓名

生日

性别

行业

职位

城市

<ss-form
  ref="demoForm"
  :model="demoForm"
  label-width="80px"
>
  <ss-form-item label="课程名称">
    <ss-input v-model="demoForm.name" size="s"></ss-input>
    <div slot="tips" class="form-tips">填写课程名称有利于快速查找</div>
  </ss-form-item>
  <ss-form-item label="课程简介">
    <ss-input v-model="demoForm.desc" type="textarea" autosize placeholder="请填写课程简介" class="course-textarea"></ss-input>
  </ss-form-item>
  <ss-form-item label="校区">
        <ss-select v-model="demoForm.school" placeholder="请选择校区" class="course-textarea" clearable>
          <ss-option
            v-for="item in schoolOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </ss-option>
        </ss-select>
      </ss-form-item>
      <ss-form-item label="课程类型">
        <ss-radio-group v-model="demoForm.type">
          <ss-radio :label="0">单节课</ss-radio>
          <ss-radio :label="1">系列课</ss-radio>
        </ss-radio-group>
      </ss-form-item>
      <ss-form-item label="学员资料">
        <ss-checkbox-group v-model="demoForm.info">
          <ss-checkbox v-for="item in infoOptions" :label="item" :key="item">
            {{item}}
          </ss-checkbox>
        </ss-checkbox-group>
      </ss-form-item>
</ss-form>

<script>
  export default {
    data() {
      return {
        demoForm: {
          name: '',
          desc: '',
          type: '',
          info: [],
          school: '',
        },
        infoOptions: ['真实姓名', '生日', '性别', '行业', '职位'],
        schoolOptions: [{
            value: 'school1',
            label: '校区1'
          }, {
          value: 'school2',
          label: '校区2'
          }],
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# 表单验证

填写课程名称有利于快速查找

单节课

系列课

真实姓名

生日

性别

行业

职位

城市

立即创建

重置

<ss-form
  ref="demoForm"
  :model="demoForm"
  :rules="rules"
  label-width="80px"
  :label-position="labelPosition"
>
  <ss-form-item label="课程名称" prop="name">
    <ss-input v-model="demoForm.name" size="s"></ss-input>
    <div slot="tips" class="form-tips">填写课程名称有利于快速查找</div>
  </ss-form-item>
  <ss-form-item label="课程简介" prop="desc">
    <ss-input v-model="demoForm.desc" type="textarea" autosize placeholder="请填写课程简介" class="course-textarea"></ss-input>
  </ss-form-item>
  <ss-form-item label="校区" prop="school">
    <ss-select v-model="demoForm.school" placeholder="请选择校区" class="course-textarea" clearable>
      <ss-option
        v-for="item in schoolOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </ss-option>
    </ss-select>
  </ss-form-item>
  <ss-form-item label="课程类型" prop="type">
    <ss-radio-group v-model="demoForm.type">
      <ss-radio :label="0">单节课</ss-radio>
      <ss-radio :label="1">系列课</ss-radio>
    </ss-radio-group>
  </ss-form-item>
  <ss-form-item label="学员资料" prop="info">
    <ss-checkbox-group v-model="demoForm.info">
      <ss-checkbox v-for="item in infoOptions" :label="item" :key="item">
        {{item}}
      </ss-checkbox>
    </ss-checkbox-group>
  </ss-form-item>
  <ss-form-item>
    <ss-button @click="submitForm('demoForm')">立即创建</ss-button>
    <ss-button @click="resetForm('demoForm')">重置</ss-button>
  </ss-form-item>
</ss-form>

<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        demoForm: {
          name: '',
          desc: '',
          type: '',
          info: [],
          school: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入课程名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写课程简介', trigger: 'blur' }
          ],
          school: [
            { required: true, message: '请选择校区', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请选择课程类型', trigger: 'change' }
          ],
          info: [
            { required: true, message: '请至少选择一个学员资料', trigger: 'change' }
          ],
        },
        infoOptions: ['真实姓名', '生日', '性别', '行业', '职位'],
        schoolOptions: [{
            value: 'school1',
            label: '校区1'
          }, {
          value: 'school2',
          label: '校区2'
          }],
      }
    }
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

# 参数

# Form Attributes

参数	说明	类型	可选值	默认值
model	表单数据对象	object	—	—
rules	表单验证规则	object	—	—
inline	行内表单模式	boolean	—	false
label-position	表单域标签的位置，如果值为 left 或者 right 时，则需要设置 `label-width`	string	right/left/top	right
label-width	表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 `auto`。	string	—	—
label-suffix	表单域标签的后缀	string	—	—
hide-required-asterisk	是否显示必填字段的标签旁边的红色星号	boolean	—	false
show-message	是否显示校验错误信息	boolean	—	true
inline-message	是否以行内形式展示校验信息	boolean	—	false
validate-on-rule-change	是否在 `rules` 属性改变后立即触发一次验证	boolean	—	true

# Form Methods

方法名	说明	参数
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
validateField	对部分表单字段进行校验的方法	Function(props: array \| string, callback: Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array \| string)

# Form Events

事件名称	说明	回调参数
validate	任一表单项被校验后触发	被校验的表单项 prop 值，校验是否通过，错误消息（如果存在）

# Form-Item Attributes

参数	说明	类型	可选值	默认值
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 `model` 中的字段	—
label	标签文本	string	—	—
label-width	表单域标签的的宽度，例如 '50px'。支持 `auto`。	string	—	—
required	是否必填，如不设置，则会根据校验规则自动生成	boolean	—	false
rules	表单验证规则	object	—	—
error	表单域验证错误信息, 设置该值会使表单验证状态变为`error`，并显示该错误信息	string	—	—
show-message	是否显示校验错误信息	boolean	—	true
inline-message	以行内形式展示校验信息	boolean	—	false
size	用于控制该表单域下组件的尺寸	string	medium / small / mini	-

# Form-Item Slot

name	说明
—	Form Item 的内容
label	标签文本的内容

# Form-Item Scoped Slot

name	说明
error	自定义表单校验信息的显示方式，参数为 { error }
tips	显示提示

# Form-Item Methods

方法名	说明	参数
resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果	-
clearValidate	移除该表单项的校验结果	-

← timepicker 日期选择器 grid栅格布局 →