再做一個表格數據的新增以及編輯當前行數據的時候遇到一個問題,因為兩個功能用的是同一個彈出框(el-dialog),考慮到編輯完成或者取消之后再次點擊新建會有數據沒有置空,開始我想的是在取消以及完成按鈕的地方加上置空方法結果忽略了點擊右上角的取消按鈕(x)不置空
<el-dialog width="30%" title="新增部門類型" :visible.sync="innerVisible" append-to-body > <el-form :model="typeform"> <el-form-item label="類型名稱" :label-width="formLabelWidth"> <el-input v-model="typeform.name" autocomplete="off"></el-input> </el-form-item> <el-form-item v-show="idVisiable" label="id" :label-width="formLabelWidth"> <el-input v-model="typeform.id" disabled autocomplete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer" @close="typeHandleClose"> <el-button @click="cancelTypeAdd">取 消</el-button> <el-button :disabled="disableEdit" type="primary" @click="addTypeForm">確 定</el-button> </div> </el-dialog> <el-dialog width="30%" title="新增部門類型" :visible.sync="innerVisible" append-to-body > <el-form :model="typeform"> <el-form-item label="類型名稱" :label-width="formLabelWidth"> <el-input v-model="typeform.name" autocomplete="off"></el-input> </el-form-item> <el-form-item v-show="idVisiable" label="id" :label-width="formLabelWidth"> <el-input v-model="typeform.id" disabled autocomplete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer" @close="typeHandleClose"> <el-button @click="cancelTypeAdd">取 消</el-button> <el-button :disabled="disableEdit" type="primary" @click="addTypeForm">確 定</el-button> </div> </el-dialog>
在element中查詢,我覺得應該是在如下圖
在這個地方綁定置空方法結果不成功
我直接在新建之前綁定置空,這樣也就更加的簡便,但是x點擊的解決方法還沒有找到
/** * 添加編輯部門類型信息置空 */ initTypeForm() { this.typeform.name = ''; this.typeform.id = ''; }, // 獲取tag信息 getTagType(e) { console.log(e); this.form.organ = ''; this.form.organ = e.typeid; },
轉變思想,再新建界面彈出之前置空初始化界面

/** * 展示添加部門類型界面 */ addtype() { this.initTypeForm(); this.innerVisible = true; this.idVisiable = false; },