antd 表格中展示过滤后的日期渲染异常问题

1、需求：一个表格，后台返回了时分秒，前端只需要展示年月日，则使用了过滤器，代码：

html
<template slot="startTime" slot-scope="{ text }">
	{{text | startPlan}}
</template>
<template slot="stopTime" slot-scope="{ text }">
	{{text | startPlan}}
</template>
js
 filters: {
  // 后台返回了时分秒，展示不需要
  startPlan(val) {
    if(typeof val === 'string') {
      return val.substring(0, 10)
    }
  }
},

2、异常：当在表格的某一行点击修改，修改弹窗出现，点击弹窗取消按钮，表格的计划开始时间消失了！

点击修改和点击取消的代码：

// 点击修改
handleEdit(isEdit, item) {
  this.value = item
  this.visible = true;
  this.isEdit = isEdit;
  if (this.isEdit) {
    // 修改，给弹窗赋值（之前数据格式报错）
    this.value.startTime = moment(this.value.startTime)
    this.$nextTick(() => {
      this.modForm.setFieldsValue({
        name: this.value.name,
        planType: this.value.type,
        startTime: this.value.startTime,
        planDay: this.value.duration,
        group: this.value.groupId
      })
    })
  }
},
// 弹窗取消按钮
handleCancel() {
  this.visible = false;
  // 重置表单
  this.modForm.resetFields()
},

3、异常排除：因为我拿到当前行数据的时候转成了moment格式，而在过滤器使用了判断是否是字符串，不是则不返回，虽然没有重新请求数据，但实际已经改变了原数据。所以点击修改的时候，其实表格对应的单元格数据已经没有了。

// 去掉
this.value.startTime = moment(this.value.startTime)

4、去掉转成moment格式的这行代码，显示正常，但是会报

5、使用浅克隆（对象拓展运算符：用于取出参数对象所有可遍历属性然后拷贝到当前对象。）

// 点击修改
handleEdit(isEdit, item) {
  // 浅克隆，重新建立一个地址，新数据改变不会影响原数据
  this.value = {...item}
  this.visible = true;
  document.getElementById("popContainer").style.overflowY = "hidden";
  this.isEdit = isEdit;
  if (this.isEdit) {
    // 修改，给弹窗赋值（之前数据格式报错）
    this.value.startTime = moment(this.value.startTime)
    this.$nextTick(() => {
      this.modForm.setFieldsValue({
        name: this.value.name,
        planType: this.value.type,
        startTime: this.value.startTime,
        planDay: this.value.duration,
        group: this.value.groupId
      })
    })
  }
},

新的地址，新对象改变，不影响旧对象

人生总会有不期而遇的温暖和生生不息的希望！