vue实现新增编辑共用一个弹窗

背景：点击新增和编辑按钮出现的是同一个弹窗，新增编辑用的是同一个接口数据。

实现效果：

新增弹窗

编辑弹窗

<template>
  <div>
    <!--      新增-->
    <NsButton type="primary" @click="addOrEdit()">新增</NsButton>

    <!--      表格 start-->
    <ElTable
      :data="tableData"
      style="width: 100%">
      <ElTableColumn
        label="操作">
        <template slot-scope="scope">
          <NsButton type="text" @click="addOrEdit(scope.row)">修改</NsButton>
        </template>
      </ElTableColumn>
    </ElTable>
  
    <!--    弹窗 start-->
    <ElDialog
      :title="dialogTitle + '弹窗'"
      :visible.sync="addDialog"
      width="560px">
      <ElForm :model="edit" ref="edit" :rules="editRules" label-width="98px">
        <ElFormItem label="名称：" prop="name">
          <ElInput maxLength="20" placeholder="不能超过20个字" v-model="edit.name" show-word-limit/>
        </ElFormItem>
        <ElFormItem label="文案：" prop="memo">
          <ElInput type="textarea" :rows="5" maxLength="250" show-word-limit placeholder="不能超过250个字" v-model="edit.memo"/>
        </ElFormItem>
      </ElForm>
      <span slot="footer">
       <NsButton @click="handleCancel">取 消</NsButton>
       <NsButton type="primary" @click="onSubmit">确 定</NsButton>
    </span>
    </ElDialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      /* 弹窗数据 */
      addDialog: false,
		
	  // 绑定值
      edit: {
        name: '',
        memo: '',
        id: null // 需要通过id来判断当前是新增or编辑
      },

	  // 表单校验
      editRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        memo: [
          { required: true, message: '请输入文案', trigger: 'blur' }
        ]
      },
      dialogTitle: '', // 弹窗标题
      
      // 表格数据（静态的）
      tableData: [
        {
          id: 1,
          ID: 7382738232091,
          name: '001',
          memo: '我是001',
          bonusNumber: '111'
        },
        {
          id: 2,
          ID: 7382738232091,
          name: '001',
          memo: '我是001',
          bonusNumber: '111'
        }
      ]
    }
  },
  methods: {
    // 弹窗确定操作
    onSubmit () {
      const params = {
        name: this.edit.name,
        memo: this.edit.memo
      }
      this.$http.fetch(this.$api.list.saveOrUpdate, params).then(res => {
        if (res.success) {
          this.$message.success(res.msg || '保存成功')
          this.addDialog = false
        } else {
          this.$message.error(res.msg)
        }
      }).catch(e => {
        this.$message.error(e.msg)
      })
    },

	// 判断当前点击的是新增还是编辑
    addOrEdit (row) {
      if (row) {
        this.addDialog = true
        this.dialogTitle = '编辑'
       	// this.edit = row // 编辑需要回显数据
       	this.edit = JSON.parse(JSON.stringify(row)) //深拷贝
      } else {
        this.addDialog = true
        this.dialogTitle = '新增'
        this.edit = {}
      }
    },

    // 取消清空弹窗操作
    handleCancel () {
      this.addDialog = false
      this.$refs.edit.clearValidate() // 取消需要清空表单校验（当前的表单用到了校验）
      this.edit = Object.assign({}, { // 清空表单数据
        name: '',
        memo: ''
      })
    }
  }
}
</script>

<style scoped>
</style>

补充

背景：
点击列表某一项进行编辑，当打开编辑弹窗编辑当前项内容时，当输入项发生改变列表的数据也会跟着改变。

出现此种情况的原因：
因为后者是Object对象类型，如果直接赋值，属于浅拷贝，赋值的是地址，会导致弹窗输入内容发生改变的时候列表数据也发生改变。

解决方案：
将其改为深拷贝

	this.edit = JSON.parse(JSON.stringify(row)) //深拷贝