[ElemeFE/element]el-form-item和整个form清空值的问题

多次试验，好像是Form 的这个方法resetFields有问题，调用后不是重置为空，而是重置为第一次给form赋的值

resetFields 中的 reset 就是重置的意思，并不是 clearFields。

@Leopoldthecoder 文档上说不是把form的所有值重置为空值么？clearFields是啥意思

咦，看起来文档描述有误，我改一下。

@Leopoldthecoder 噢噢，那就看官方的考虑吧，我个人觉得还是清空form的model值比较好

@Leopoldthecoder 感觉这个resetFields是重置为上一次的值，并不是初始值，文档描述还是有问题还是这是bug？

@yushaoyi 一样的问题，每次都是重置为第一次的值，请问兄台有解决办法吗

@chenxvhua @AlenWang 额，好久没用vue了，当时是这样处理的

//开启dialog的时候
init: function() {
    this.form.name=  '';
    this.form.phone=  '';
    this.dialogVisible = true;
}
//关闭dialog回调
cancel: function (str) {
    this.form = {
        name: '',
        phone: ''
    };
    this.$refs[str].resetFields();
    this.dialogVisible = false;
},

不知道你的是否可以

<el-dialog :close-on-click-modal=false @close="cancel('teacherForm')" :title="dialogTitle" v-model="dialogVisible">

问题再细化一下是这样的： 比如我有一个用来修改数据的表单，第一条数据是{name: 'Xixi', age: 12}，打开表单后就有两个输入框分别填的是Xixi和12，此时我修改Xixi为Haha，调用this.$refs[].resetFields()后，该表单数据恢复为Xixi和12，这是没问题的。 现在我要修改第二条数据{name: 'Dog', age: 4}，打开表单后将Dog修改为Cat，此时我再次调用this.$refs[].resetFields()，表单数据理想情况应该被重置为{name: 'Dog', age: 4}，可是实际上会变成第一次传入的数据{name: 'Xixi', age: 12}，而理想的重置应该是重置为表单打开后的数据，无论是第几次被打开。

也就是说： 对于增操作，这个resetFields()是有效的，因为每次重置的值都是空。 对于改操作，因为每条数据不同，每次重置需要回到的值不同，但是resetFields()只认第一次打开表单后接收到的数据，这个功能就没用了。

解决办法： 现在我的解决办法是，利用v-if的特性，进行form的销毁和重建，强行让每一次改操作拿到的数据为传说中的初始值。

@Holybasil 相当于加载完数据后强行重新新建一个 form ? 可不可以使用 key 标记来解决呢?

@kid1412621 key标记组件的重用 是多个组件之间进行对比 而这个表单其实是一个组件进行复用（也就是只用了一次） 你可以前后给这个组件标记不同的key值 但是由于他就是一个组件 所以并不能改变什么

<el-dialog v-dialogDrag :visible="edit.dialogVisible" title="编辑" width="60%" :before-close="handleClose" center> <project-form v-if="edit.dialogVisible" @submit="editForm" :form="edit.form" /> </el-dialog> 因为重置表单是让表单回到create时的初始状态，那么每次dialog隐藏的时候就让他从内存里消失，所以我用了v-if指令

I also have this problem, like the same scenario of @Holybasil and I have to fix this using the v-if directive on each editForm.

我用了你的方法解决了问题，但是有个问题就是动画方面的，form先消失，dialog后消失，这个怎么解决呢？我想让用户感觉不到这种变化。

@14glwu 这个动画的问题是这个解决办法的最大bug 暂时没有办法解决呢

1.用表单对数据直接进行编辑时，可利用setTimeout机制，设置各项数据初始值为空

2.清空表单，可直接使用resetFields

这样子肯定可以啦，这不就相当于重新赋值了嘛

created(){ this.form=this.form; }验证过可以

我看楼上也是各种骚操作，我认为最优秀的清空方案： this.$refs.form.resetfield() Object.assign(this.form, this.$options.data().form)

@wangwanchao 老哥 稳

@wangwanchao 溜呀，好方法

this.$options.data();获得是实例之前的数据

this.$nextTick(() => { this.form.user_id = "111"; ... }); 楼主是用v-if的时候，应该赋值也要$nextTick(),不然也是无效的。

`<el-dialog title="编辑" width="30%" :visible.sync="isEdit"

定义一下fade的transition就可以了

这才是又骚又稳的操作

牛逼

大佬没看懂你这个写法,是这么写吗 closeDialog() { // this.$nextTick(() => { // this.$refs['form'].resetFields(); // }); this.$refs.form.resetfield(); Object.assign(this.form, this.$options.data().form) },