el-date-picker 时间区域选择，type=daterange，form表单校验+数据回显问题

情景+问题：新增表单有时间区域选择，选择了时间，还是提示必填的校验提示语，且修改时，通过 =号赋值法，重新选择此时间范围无效。

解决方法：（重点）

• widthHoldTime:[]，要定义到deal_form对象里面。不要拿出来单独定义。入参时不需要 ，可以通过delete 方法删除。

• 修改时，要通过this.$set()赋值。

html

<el-form ref="dealForm" :model="deal_form" :rules="deal_form_rules" label-width="130px">
  <el-form-item label="合同开始-终止时间" prop="widthHoldTime">
    <el-date-picker v-model="deal_form.widthHoldTime" value-format="yyyy-MM-dd" type="daterange"
      range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :clearable='false' />
  </el-form-item>
</el-form>

js

<script>
  export default {
    data() {
      return {
        deal_form_rules: {
          // 手机号校验
          agentPhone: [{
            required: true,
            message: "请输入代办人电话",
            trigger: "blur"
          }, {
            required: true,
            pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
          }],
          // 生效起始时间-终止时间，时间范围校验
          widthHoldTime: [{
            required: true,
            message: "请选择合同开始-终止时间",
            trigger: "blur"
          }],

        }
      }
    },
    methods: {
      // 新增
      open_add() {
        this.deal_obj.open = true
        this.deal_obj.title = '新增'
        this.deal_form = {
          agentPhone: null, //手机号
          startTime: null, // 起始时间
          endTime: null, //终止时间
          widthHoldTime: [] //起始时间 - 终止时间，* 注意：此数据要放到 deal_form form表格字段里面，不然无法校验（即校验规则无法生效）
        };
        this.$nextTick(() => {
          this.$refs["dealForm"].resetFields();
        })
      },
      // 修改 - 查询修改信息，并赋值到 el-form 表格中
      edit_withhold(row) {
        getWidthhold(row.contractId).then(res => {
          if (res.code == 200) {
            this.$nextTick(() => {
              if (this.$refs["dealForm"]) this.$refs["dealForm"].resetFields();
            })
            this.deal_obj.title = '修改'
            this.deal_form = res.data;
            this.$set(this.deal_form, 'widthHoldTime', [res.data.startTime, res.data
              .endTime]) // * 注意：要用 $set 方法赋值才可修改。不然只能展示，无法重新选择/更新值。
            this.deal_obj.open = true
          } else {
            this._err(res.msg)
          }
        });
      },
      // 新增/修改 - 提交
      submit_dealForm() {
        this.$refs["dealForm"].validate(valid => {
          if (valid) {
            // 将 widthHoldTime 时间区域的值，赋值给传入后端的 起始、终止（startTime，endTime）两个子弹中，并删除入参中多余的 widthHoldTime 字段
            let params = {}
            Object.assign(params, this.deal_form);
            [params.startTime, params.endTime] = params.widthHoldTime;
            delete params.widthHoldTime
            // 调用接口提交
            if (this.deal_obj.title == '修改') {
              // 调用修改接口,do something
            } else {
              // 调用新增接口,do something
            }
          }
        });
      },
    }
  }
</script>