場景：

　　頁面開發中要求根據需求，先通過判斷一個選擇器的值，然後選擇出現時間點，還是時間範圍。如下圖：

　　這裡要是選擇單次授權，則是時間點，時間授權，則是時間範圍。問題在於一開始選擇單次授權，時間控制元件位置正確，但是切換方式後，時間控制元件定位錯誤，出現在左上角。如下圖：

解決：

　　這是關鍵程式碼：

<el-form-item
            label="開始時間："
            v-if="aForm.type ==0"
            prop="beginTime"
            :rules="[{ required: true
 
, message: '授權時間不能為空', trigger: 'blur' }]"
          >
            <el-date-picker
              v-model="aForm.beginTime"
              type="datetime"
              placeholder="選擇時間"
              style="width:150px"
            >
            </el-date-picker>
          </el-form-item>

　　方案一：把 v-if換成v-show

　　　　失敗。這種方式能解決定位錯誤問題，但是v-show是全部渲染DOM，之後再根據條件隱藏。而v-if是根據條件判斷是否渲染DOM。這裡用會導致資料繫結的問題

　　方案二：新增key

　　　　成功。給el-date-picker元件新增key，key值就是v-model的值，如下：

<el-date-picker
              v-model="aForm.beginTime"
              key="beginTime"
              type="datetime"
              placeholder
 
="選擇時間"
              style="width:150px"
            >
            </el-date-picker>

　　　　結果，解決定位錯誤問題，也不影響資料繫結，如圖：