WdView

Form 表单

表单组件包含数据录入，表单验证，样式

有两种排列模式： 1、垂直排列 2、行内排列

用法

行内排列

表单

设置inline属性可以让表单项以行内样式排列

点击查看代码

<wd-form
  ref="userInfoForm"
  label-width="100px"
  label-align="right"
  size="small"
  inline
  :model="userInfo"
  :validate-on-rule-change="true"
  :rules="formRules"
  :show-message="true"
  label-position="left"
>
  <wd-form-item label="姓名" prop="name">
    <wd-input
      type="text"
      placeholder="请输入姓名"
    ></wd-input>
  </wd-form-item>
  <wd-form-item label="性别" prop="gender">
    <wd-radio
      :checked="isMale"
      name="color"
      @change="handleRadioChange"
    >
      男
    </wd-radio>
    <wd-radio
      :checked="isFemale"
      name="color"
      @change="handleRadioChange"
    >
      女
    </wd-radio>
  </wd-form-item>
  <wd-form-item label="婚姻状况" prop="isMerried">
    <wd-checkbox
      @change="handleCheckboxChange"
    >
      已婚
    </wd-checkbox>
  </wd-form-item>
  <wd-form-item label="年龄" prop="age">
    <wd-input-number
      max="20"
      min="0"
      @input="handleInputNumber"
      @change="handleChangeNumber"
      type="text"
    ></wd-input-number>
  </wd-form-item>
  <wd-form-item label="学历">
    <wd-select
      v-model="selectedValue"
      @change="selectedChangeHandler"
      placeholder="请选择学历"
    >
      <wd-option label="研究生" value="baidu"></wd-option>
      <wd-option label="本科" value="google"></wd-option>
      <wd-option label="专科" value="bing"></wd-option>
    </wd-select>
  </wd-form-item>
  <wd-form-item>
    <wd-button size="small" type="danger">重置</wd-button>
    <wd-button size="small" type="success" @click="regHandler"
      >提交</wd-button
    >
  </wd-form-item>
</wd-form>

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

垂直排列

垂直表单

设置inline为false或者不设置inline属性，每一个表单项单独一行排列

点击查看代码

<wd-form
  ref="userInfoForm"
  label-width="100px"
  label-align="right"
  size="small"
  :model="userInfo"
  :validate-on-rule-change="true"
  :rules="formRules"
  :show-message="true"
  label-position="left"
>
  <wd-form-item label="姓名" prop="name">
    <wd-input
      type="text"
      placeholder="请输入姓名"
    ></wd-input>
  </wd-form-item>
  <wd-form-item label="性别" prop="gender">
    <wd-radio
      :checked="isMale"
      name="color"
      @change="handleRadioChange"
    >
      男
    </wd-radio>
    <wd-radio
      :checked="isFemale"
      name="color"
      @change="handleRadioChange"
    >
      女
    </wd-radio>
  </wd-form-item>
  <wd-form-item label="婚姻状况" prop="isMerried">
    <wd-checkbox
      @change="handleCheckboxChange"
    >
      已婚
    </wd-checkbox>
  </wd-form-item>
  <wd-form-item>
    <wd-button size="small" type="danger">重置</wd-button>
    <wd-button size="small" type="success" @click="regHandler"
      >提交</wd-button
    >
  </wd-form-item>
</wd-form>

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

Form 属性

参数	说明	类型	可选值	默认值
colon	标签后面是否显示冒号	boolean	true / false	true
disabled	是否可用	boolean	true / false	true
inline	是否是行内模式	boolean	true / false	false
inline-message	验证提示文字	string	-	-
label-align	标签内文案位置	string	left / center / right	left
label-position	标签位置	string	left / top	left
label-width	标签大小	string	-	100px
rules	表单验证规则	object	-	100px
size	表单尺寸	string	small / large	small
validate-on-rule-change	验证规则改变之后是否立即执行一次验证	boolean	true / false	false

FormItem 属性

参数	说明	类型	可选值	默认值
label-position	标签位置	string	left / top	left
label-width	标签大小	string	-	100px
rules	表单验证规则	object	-	100px
size	表单尺寸	string	small / large	small
show-message	是否展示验证信息	boolean	true / false	true

# Form 表单

# 用法

# 行内排列

# 垂直排列

# Form 属性

# FormItem 属性

Form 表单

用法

行内排列

垂直排列

Form 属性

FormItem 属性