element-ui resetFields方法影响表格中原数据

Question

问题描述

cms系统中表格列出会员信息，点击修改时传入当前行对象。
当放弃修改表单时调用this.$refs[formName].resetFields()方法。
此时，表格中的数据会被修改。

相关代码

html

<el-dialog :visible.sync = "dialogVisible">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.name"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
      </div>
    </el-dialog>
    <el-table
      :data="initVal"
      border
      highlight-current-row>
      <el-table-column
        prop="id"
        label="id"
        align="center"/>
      <el-table-column
        prop="name"
        label="姓名"
        align="center"/>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

js

export default {
  data() {
    return {
      dialogVisible: false,
      initVal: [
        {
          id: 1,
          name: '张三'
        },
        {
          id: 2,
          name: '李四'
        }
      ],
      ruleForm: {
        id: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    edit(row) {
      this.ruleForm = row
      this.dialogVisible = true
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    }
  }
}

张三--->修改--->取消
李四--->修改--->取消

Answer 1

对象拷贝问题