情景+问题：新增表单有时间区域选择，选择了时间，还是提示必填的校验提示语，且修改时，通过 =号赋值法，重新选择此时间范围无效。
解决方法：（重点）
-
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().then(res => {
if ( == 200) {
this.$nextTick(() => {
if (this.$refs["dealForm"]) this.$refs["dealForm"].resetFields();
})
this.deal_obj.title = '修改'
this.deal_form = ;
this.$set(this.deal_form, 'widthHoldTime', [,
.endTime]) // * 注意：要用 $set 方法赋值才可修改。不然只能展示，无法重新选择/更新值。
this.deal_obj.open = true
} else {
this._err()
}
});
},
// 新增/修改 - 提交
submit_dealForm() {
this.$refs["dealForm"].validate(valid => {
if (valid) {
// 将 widthHoldTime 时间区域的值，赋值给传入后端的 起始、终止（startTime，endTime）两个子弹中，并删除入参中多余的 widthHoldTime 字段
let params = {}
(params, this.deal_form);
[, ] = ;
delete
// 调用接口提交
if (this.deal_obj.title == '修改') {
// 调用修改接口,do something
} else {
// 调用新增接口,do something
}
}
});
},
}
}
</script>