动态表单组件的清空

今天给大家封装一个element表单数据清空的方法。之前有把element的表单进行动态封装，这样的话再去调用element的表单清空方法就需要this.$refs.['表单ref名'].resetFields()来进行清空，但是有些例如富文本编辑器组件，二次封装的图片上传组件等等；利用resetFields表单重置函数不能完全做到清空，这个时候就需要我们手动清空。 我见过好多人这样写

this.form = {
    a:'',
    b:[],
    c:''
    ...
}
或
this.form.a = '';
this.form.b = [];
this.form.c =''

表单内容少也就罢了，有些管理系统有好多表单内容，一条条字段清空？ 废话不多说，上代码先：

export function clearObject(obj,_this,ref){
    let data = {...obj}
    for (var key in data){
        if(data[key].isArray){
            data[key] = []
        }else{
            data[key] = ''
        }
    };
    _this.myForm = data;
    _this.$nextTick(()=>{
        ref.resetForm();
    })
    return Promise.resolve(data)
}

说一下参数,obj是我们绑定的表单数据，例如

myForm:{
    name:'',
    vscode:'',
    prodType:'',
    prodp:'2',
    commissions:['1','5'],
    commdate:'',
    commdatetime:'',
    images:['https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80'],
    editor:'',
},

_this是把页面的this指向传过去，让我们可以在方法内就能得到当前的this.form，从而顺利清空对象； ref是已经封装好的动态表单的ref属性名；

<dynamic-form :myForm="myForm" :formData="formData" ref="dynamic" :inline="false">
    <div slot="handle">
        <el-button type="primary" @click="onSubmit()">{{submitText}}</el-button>
        <el-button type="success" @click="clear()">清空</el-button>
        <el-button type="warning">取消</el-button>
    </div>
</dynamic-form>
methods:{
    //点击提交，校验表单，进行业务操作
    clear(){
        //clearObject方法循环遍历清空对象属性值
        clearObject(this.myForm,this,this.$refs.dynamic).then();
    },
    //提交
    async onSubmit(){}
}

clearObject方法中的ref.resetForm()方法，就是我们在动态表单组件中使用的element提供的清空方法；

//重置
resetForm(){
    this.$refs['customForm'].resetFields();
},

至于动态表单组件，大家可以去看我之前写的这篇 封装一个动态表单吧