vue中加key能解决的问题

工作中遇到的两个问题，最后通过在对应的标签上加上key解决了。

问题1：一个页面上同时使用2个或更多的日期选择组件（element-ui）（未开始状态下有日期组件，已完成状态下也有），打开其中一个日期选择弹窗，关闭后再打开另一个日期选择弹窗，弹窗位置错乱

解决方法：在每个el-date-picker标签里加不同的key <el-date-picker key="planTime" ... >

问题2：日期设置了表单验证规则，状态由其他状态切换到‘未开始’时，时间为空，点击提交可以提交成功，验证规则没生效

解决方法：在包含该日期组件的el-form-item标签上加key
<el-form-item
    v-if="statusForm.status == deliverStatus.INIT"
    ...
    key="timeValid"
    :rules="[{ required: true, message: '请选择时间', trigger: 'blur' }]"
  >
    <el-date-picker
      ...
    >
    </el-date-picker>
  </el-form-item>