[JavaScript知识库]antdv的日期选择框赋值后不能清除也不能选择别的时间的处理

最近在用到日期选择框遇到一个小问题

应用场景是这样的：新增和修改时一个form，一个弹出框。新增时候把日期选择框的年月日时分秒传给后端；修改时请求接口把年月日时分秒的值变成moment的值赋值给日期选择框（因为日期选择框只能是moment格式）。然后发现直接赋值会报警告，只能是moment的格式，换成moment的值复制发现选择日期选择框的值能拿到，但是页面没有变化也不能删除（this.$set解决，下面有注释，往下翻）

下面是解决办法

组件部分

<!--新增和编辑的弹出框-->
      <a-modal
        v-model="visible"
        :title="title"
        @ok="submit"
        @cancel="handleCancel"
        width="700px"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row>

            <a-col :span="24">
              <a-form-model-item
                label="到期时间"
                prop="time"
                :label-col="{ span: 4, offset: 0 }"
              >
                <a-date-picker
                  v-model="form.time"
                  @change="dataPicker"
                  show-time
                  placeholder="请选择到期时间"
                  style="width: 100%"
                />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>

js部分

import moment from "moment";
export default {
data() {
    return {
      //新增和编辑的表单
      form: {},
      //表单规则
      rules: {
        time: [
          {
            required: true,
            message: "请选择到期时间",
            trigger: ["change", "blur"],
          },
        ],
      },
      //label和wrapper的占位
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      //新增和编辑弹出框的标题
      title: "",
      //新增和编辑弹出框的显示隐藏
      visible: false,
    };
  },
    methods: {
    //日期选择框变化
    dataPicker(date, dateString) {
      console.log(date, dateString);
      // 后端所需要的的值和字段
      this.form.expireTime = dateString;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {};
      this.visible = true;
      this.title = "新增";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      getTenant(row.id).then((res) => {
        this.form = res.data;
        this.visible = true;
        this.title = "修改";
        let time = new Date(JSON.parse(JSON.stringify(this.form.expireTime)));
        //这边解决复制后页面不能变化
        // this.form.time = moment(moment(time).format("YYYY-MM-DD HH:mm:ss"));
        //上面一种只能拿到值不能改变页面，下面这种可以
        this.$set(this.form, "time", moment(time));
      });
    },
    //新增或编辑确定
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
        //传给后端前删除这个字段（根据自己项目需要）
          delete this.form.time;
          tenantAddOrUpdate(this.form).then((res) => {
            //修改
            if (this.form.id) {
              this.$message.success("修改成功");
            }
            //新增
            else {
              this.$message.success("新增成功");
            }
            this.visible = false;
            this.getTenantList();
          });
        }
      });
    },
    //新增或编辑取消
    handleCancel() {
      this.$refs.ruleForm.resetFields();
      this.visible = false;
    },
  },
  }