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 = truethis.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>