vue element-ui 中關於清空表單的問題

初學vue element-ui掉進了許多坑，下面是關於表單重置的問題處理方法：

描述：例如一個添加dialog 填入數據后保存，關閉了dialog ,然后再次添加又顯示上次添加的數據；這時就需要我們el-dialog 添加 @close綁定方法 如下：

    <!-- 添加dialog -->
            <el-dialog width="60%" :title="dialogTitle" :visible.sync="dialogFormVisible" @close="addDialogClosed">
                <el-form :model="caseform" ref="caseformRef">
                    <el-form-item label="用例名稱" :label-width="formLabelWidth" prop="case_name">
                        <el-input v-model="caseform.case_name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用例描述" :label-width="formLabelWidth" prop="case_desc">
                        <el-input v-model="caseform.case_desc" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <div>
                        <el-button @click="dialogFormVisible=false">取 消</el-button>
                        <el-button type="primary" @click="addcase()">確定</el-button>
                    </div>
                </div>
            </el-dialog>
　　　　　　

　　　　　　// 對話框的關閉事件,item一定要加prop屬性 和model 綁定的一致
　　　　　　addDialogClosed() {
　　　　　　　　　　this.$refs.caseformRef.resetFields()
　　　　　　}

尤其需要注意的是 item一定要加prop屬性和model 綁定的一致，並且綁定的數據名稱和后端接口返回的字段名稱也一致，此方法親測有效，大家可以嘗試。

 

 

 

 

item 一定要加prop屬性