Api

el-form

基础使用

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

<template>
  <el-form v-ref:form @submit.prevent="onSubmit" label-width="80px">
    <el-form-item label="活动名称">
      <el-input :value.sync="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select :value.sync="form.region" :width="360" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="配送时间">
      <el-col :span="11">
        <el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="蜂鸟配送">
      <el-switch on-text="" off-text="" :value="form.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质">
      <el-checkbox-group :value.sync="form.type">
        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
        <el-checkbox label="地推活动" name="type"></el-checkbox>
        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源">
      <el-radio :value.sync="form.resource" label="线上品牌商赞助"></el-radio>
      <el-radio :value.sync="form.resource" label="线下场地免费"></el-radio>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input type="textarea" :value.sync="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">立即创建</el-button>
      <el-button @click.prevent>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

Inline 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

<template>
  <el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
    <el-form-item>
      <el-input :value.sync="formInline.user" placeholder="审批人"></el-input>
    </el-form-item><el-form-item>
      <el-select :value.sync="formInline.region" :width="150" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item><el-form-item>
      <el-button type="primary">查询</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</script>

Stacked 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

<template>
  <el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
    <el-form-item label="名称">
      <el-input :value.sync="formStacked.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域">
      <el-select :value.sync="formStacked.region" :width="360" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动展开形式">
      <el-input :value.sync="formStacked.type"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input :value.sync="formStacked.remark"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">立即创建</el-button>
      <el-button @click.prevent>取消</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        formStacked: {
          name: '',
          region: '',
          type: '',
          remark: ''
        }
      };
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</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

<template>
  <el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
    <el-form-item label="名称">
      <el-input :value.sync="formAlignLeft.name"></el-input>
    </el-form-item>
    <el-form-item label="推广地">
      <el-select :value.sync="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动形式">
      <el-input :value.sync="formAlignLeft.type"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary">查询</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        formAlignLeft: {
          name: '',
          region: '',
          type: ''
        }
      };
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</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

<template>
  <el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
    <el-form-item>
      <el-input :value.sync="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input :value.sync="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="fr">登录</el-button>
      <el-checkbox :value.sync="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        formNoLabel: {
          username: '',
          pass: '',
          rememberPss: false
        }
      };
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      }
    }
  }
</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
86
87
88
89
90
91
92
93
94

<template>
  <el-form :model="ruleForm" :rules="rules" v-ref:rule-form label-width="80px">
    <el-form-item label="用户名" :required="true">
      <el-col :span="11">
        <el-form-item prop="user1">
          <el-input :value.sync="ruleForm.user1" placeholder="First Name"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="2"><div class="line">-</div></el-col>
      <el-col :span="11">
        <el-form-item prop="user2">
          <el-input :value.sync="ruleForm.user2" placeholder="Last Name"></el-input>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input :value.sync="ruleForm.age" :number="true"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="mail">
      <el-input :value.sync="ruleForm.mail"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-radio-group :value.sync="ruleForm.sex">
        <el-radio label="男" name="sex"></el-radio>
        <el-radio label="女" name="sex"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="简介" prop="desc">
      <el-input type="textarea" :value.sync="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item label="地区" prop="region" placeholder="请选择地区">
      <el-checkbox-group :value.sync="ruleForm.region">
        <el-checkbox label="BeiJing" name="region"></el-checkbox>
        <el-checkbox label="ShangHai" name="region"></el-checkbox>
        <el-checkbox label="ShenZhen" name="region"></el-checkbox>
        <el-checkbox label="GuangZhou" name="region"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.prevent="handleSubmit">提交</el-button>
      <el-button @click.prevent="handleReset">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm: {
          sex: '',
          user1: '',
          user2: '',
          age: '',
          region: [],
          desc: '',
          mail: ''
        },
        rules: {
          user1: [
            { required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' }
          ],
          user2: [
            { required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
          ],
          mail: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
          ],
          sex: [
            { required: true, message: '请选择性别' }
          ],
          region: [
            { type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写个人简介', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      handleSubmit(ev) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</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

<template>
  <el-form :model="ruleForm2" :rules="rules2" v-ref:rule-form2 label-width="80px">
    <el-form-item label="密码" prop="pass">
      <el-input type="password" :value.sync="ruleForm2.pass" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="checkPass">
      <el-input type="password" :value.sync="ruleForm2.checkPass" auto-complete="off"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input :value.sync="ruleForm2.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.prevent="handleSubmit2">提交</el-button>
      <el-button @click.prevent="handleReset2">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        ruleForm2: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules2: {
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { validator: this.validaePass }
          ],
          checkPass: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { validator: this.validaePass2 }
          ],
          age: [
            { required: true, message: '请填写年龄', trigger: 'blur' },
            { validator: this.checkAge, trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      handleSubmit(ev) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</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

<template>
  <el-form :model="dynamicForm" :rules="dynamicRule" v-ref:dynamic-form label-width="80px">
    <el-form-item prop="email" label="邮箱">
      <el-input :value.sync="dynamicForm.email"></el-input>
    </el-form-item>
    <el-form-item
      v-for="domain in dynamicForm.domains"
      :label="'域名' + $index"
      track-by="$index"
      :prop="'domains:' + $index"
      :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }">
      <el-input :value.sync="domain"></el-input><el-button @click="dynamicForm.domains.$remove(domain)">删除</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click.prevent="handleSubmit3">提交</el-button>
      <el-button @click.prevent="dynamicForm.domains.push('')">新增域名</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        dynamicForm: {
          domains: [''],
          email: ''
        },
        dynamicRule: {
          domains: {
            type: '域名不能',
            required: true
          },
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
          ]
        }
      };
    },
    methods: {
      handleSubmit3(ev) {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
  }
</script>

el-form API

组件属性和事件

参数 说明 类型 可选值 默认值
model 表单数据对象 object
rules 表单验证规则 object
type 表单类型 string stacked, inline, horizontal horizontal
label-align 表单域标签的水平对齐位置 string right,left right
label-width 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 string
label-suffix 表单域标签的后缀 string

el-form 实例属性和方法

方法名 说明 类型 默认值
validate(cb) 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 function
validateField(prop, cb) 对部分表单字段进行校验的方法
resetForm 对整个表单进行重置，将所有字段值重置为空并移除校验结果

el-form-item API

参数 说明 类型 可选值 默认值
prop 表单域model字段 string 传入父级 v-form 的 model 中的所有属性
label 标签文本 string
label-width 表单域标签的的宽度，例如 ‘50px’ string
required 是否必填，如不设置，则会根据校验规则自动生成 bolean false