elementui el-date-picker日期组件（范围）已选页面显示失效、change事件失效以及动态表单循环写法

本文介绍: 最近项目做一个动态表单的增删改查，里面有用到选择日期范围，并且做了表单校验，但是在选择日期范围的时候已经选择到了但是无法在输入框内回显毫无反应且change 事件也处于失效状态。

最近项目做一个动态表单的增删改查，里面有用到选择日期范围，并且做了表单校验，但是在选择日期范围的时候已经选择到了但是无法在输入框内回显毫无反应且change 事件也处于失效状态。

一、项目实例 图片

在这里插入图片描述

二、部分 代码片

1.el–date–p ic k e r

&lt;el-form :model="dynamicForm" ref="dynamicForm" :rules="rules"&gt; //其他属性省略根据自己需求写上
	&lt;div v-for="(item, index) in dynamicForm.dataList" :key="index"&gt;  // 动态表单
	  &lt;el-form-item :prop="`dataList[${index}].desc`" :rules="rules.desc"&gt;
		<el-input v-model="item.desc"  type="text" &gt; </el-input&gt;
	  </el-form-item>
	  <el-form-item :prop="`dataList[${index}].num3`">
		<el-date-picker
		    v-model="item.num3"
		    type="monthrange"
		    range-separator="至"
		    start-placeholder="开始日期"
		    end-placeholder="结束日期"
		    :picker-options="pickerOptions"
		    value-format="yyyy-MM"
		    format="yyyy-MM"
		    @input="handleInput($event,index)"  // change失效用input代替
		>
		</el-date-picker>
	  </el-form-item>
	</div>
</el-form>

2.自定义data

	data(){
		retuen {
			rules: {},
			dynamicForm:{
				dataList: [
					num3: [],
					desc: ''
				]
			}
		}
	}

3.methods

handleInput (val, index) {
	if (val) {
        // 反显
        this.$set(this.dynamicForm.dataList[index].num3, 0, val[0])
        this.$set(this.dynamicForm.dataList[index].num3, 1, val[1]) //数组的索引响应式使用$set改变对应值 
      } else {
        // 清空
        this.$set(this.dynamicForm.dataList[index].num3, 0, '')
        this.$set(this.dynamicForm.dataList[index].num3, 1, '')
      }
}