element form表单的实现

element form表单

Form 表单 | Element Plus

源码地址：

GitHub - ElemeFE/element: A Vue.js 2.0 UI Toolkit for Web

 想要实现上图的表单我们只需要引入element-ui的form表单，按照表单的传参要求，就可以实现上图的效果

1.  
   <template>
2.  
   <el-form
3.  
   ref="ruleForm"
4.  
   :model="ruleForm"
5.  
   :rules="rules"
6.  
   label-width="100px"
7.  
   >
8.  
   <el-form-item label="活动名称" prop="name">
9.  
   <el-input v-model="ruleForm.name" placeholder="请输入活动名称" />
10.  
    </el-form-item>
11.  
    <el-form-item label="活动区域" prop="region">
12.  
    <el-input v-model="ruleForm.region" placeholder="请输入活动区域" />
13.  
    </el-form-item>
14.  
    <el-form-item style="text-align: right">
15.  
    <el-button @click="resetForm('ruleForm')">重置</el-button>
16.  
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
17.  
    </el-form-item>
18.  
    </el-form>
19.  
    </template>
20.  
     
21.  
    <script lang="ts">
22.  
    export default {
23.  
    data() {
24.  
    return {
25.  
    ruleForm: {
26.  
    name: '',
27.  
    region: ''
28.  
    },
29.  
    rules: {
30.  
    name: [
31.  
    { required: true, message: '请输入活动名称', trigger: 'blur' },
32.  
    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
33.  
    ],
34.  
    region: [
35.  
    { required: true, message: '请选择活动区域', trigger: 'change' }
36.  
    ]
37.  
    }
38.  
    }
39.  
    },
40.  
    methods: {
41.  
    submitForm(formName:any) {
42.  
    (this.$refs[formName]as any).validate((valid:any) => {
43.  
    if (valid) {
44.  
    alert('submit!')
45.  
    } else {
46.  
    console.log('error submit!!')
47.  
    return false
48.  
    }
49.  
    })
50.  
    }
51.  
    }
52.  
    }
53.  
    </script>

接下来我们就来简单的实现下上面的form组件，下面的代码只是让你对form有个大概的了解，如果需要详细知道内部是怎么实现的，可以去看下源码。

首先我们需要实现el-input数据间的双向绑定

1.  
   <template>
2.  
   <div>
3.  
   <input :value="value" @input="inputChange">
4.  
   </div>
5.  
   </template>
6.  
    
7.  
   <script>
8.  
    
9.  
   export default {
10.  
    props: {
11.  
    // 接收父组件的值
12.  
    value: {
13.  
    type: String,
14.  
    default: ''
15.  
    }
16.  
    }
17.  
    // 将子组件值传给父组件
18.  
    inputChange(e: any) {
19.  
    this.$emit('input', e.target.value)
20.  
    }
21.  
    // 通知父级校验数据
22.  
    this.$parent.$emit('validate')
23.  
    }
24.  
    </script>

然后我们需要看下el-form-item里面都做了什么，展示label和输入框以及报错信息

1.  
   <template>
2.  
   <div>
3.  
   <label v-if="label">{{ label }}</label>
4.  
   <slot />
5.  
   <p v-if="error">{{ error }}</p>">
6.  
   </div>
7.  
   </template>
8.  
    
9.  
   <script>
10.  
    import AsyncValidator from 'async-validator';
11.  
    export default {
12.  
    // 实现祖先和后代之间通信
13.  
    inject: ['form']
14.  
    props: {
15.  
    // 标签
16.  
    label: {
17.  
    type: String,
18.  
    default: ''
19.  
    },
20.  
    // 字段名
21.  
    prop: {
22.  
    type: String,
23.  
    default: ''
24.  
    }
25.  
    }
26.  
    mounted(){
27.  
    this.$on('validate',()=>{ this.validate() })
28.  
    }
29.  
    methods:{
30.  
    validate(){
31.  
    // 获取对应的FormItem校验规则
32.  
    const rules = this.form.rules[this.prop]
33.  
    // 获取校验的值
34.  
    const value = this.form.model[this.prop]
35.  
    // 创建校验器
36.  
    const descriptor = {}
37.  
    descriptor[this.prop] = rules;
38.  
    const validator = new AsyncValidator(descriptor);
39.  
    return validator.validate({[this.prop]:value}, errors=>{
40.  
    if(errors){
41.  
    // 将错误信息显示
42.  
    this.error = errors[0].message
43.  
    }else{
44.  
    // 校验通过
45.  
    this.error = ''
46.  
    }
47.  
    })
48.  
    }
49.  
    }
50.  
    }
51.  
    </script>

最后简单来看下el-form里面的实现

1.  
   <template>
2.  
   <form>
3.  
   <solt/>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
   export default {
8.  
   // 实现祖先和后代之间通信
9.  
   provide(){
10.  
    return {
11.  
    form: this
12.  
    }
13.  
    }
14.  
    props: {
15.  
    // 标签
16.  
    model: {
17.  
    type: Object
18.  
    },
19.  
    // 字段名
20.  
    rules: {
21.  
    type: Object
22.  
    }
23.  
    }
24.  
    methods:{
25.  
    // this.$refs[formName].validate((valid:any) => {})
26.  
    // 上面方法的简单实现
27.  
    validate(cb){
28.  
    const tasks = this.$children.filter(item=>item.prop)
29.  
    .map(item=>item.validate())
30.  
    Promise.all(task).then(()=>cb(true)).catch(()=>cb(false))
31.  
    }
32.  
    }
33.  
    }
34.  
    </script>

这篇好文章是转载于：学新通技术网