vue element dialog弹框 表单 编辑后再点击新增 表单无法重置问题

<el-table-column fixed="right" align="center" width="100" label="操作" min-width="150px">
  <template slot-scope="scope">
    <el-dropdown trigger="click" @command="handleCommand">
      <el-button class="btn-drop-down" @click="selectRow(scope.row)">
        <i class="el-icon-arrow-down"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="edit">编辑</el-dropdown-item>
        <el-dropdown-item command="del">删除</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </template>
</el-table-column>
handleCommand(val) {
  if (val === 'edit') {
    this.handleEdit();
  } else if (val === 'del') {
    this.handleDelete();
  }
},
selectRow(val) {
    this.formModel = Object.assign({}, val);
},
//点击添加
handleAdd(val) {
  this.dialogStatus = 'create';
  this.addViewVisible = true;
},
//点击编辑按钮
handleEdit(val) {
  this.dialogStatus = 'update'
  this.addViewVisible = true;
  this.$nextTick(function () {
    this.msgForm = this.formModel;   //表单绑定  :model="msgForm "
  })
},
//关闭dialog清空表单
closeDialog() {
  this.$refs['msgForm'].resetFields();
}

你可能感兴趣的:(vue)