element-ui 使用多个时间选择器 造成弹窗错位问题

//给每一个 el-date-picker 标签 添加一个 key 值      key="value"  
<el-form-item>
        <el-select v-model="listQuery.Time" placeholder="时间选择">
          <el-option
            v-for="item in timeSelection"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
 <el-form-item v-if="listQuery.Time == 'Month'">
        <el-date-picker
          v-model="MounthTime"
          key="'month'"
          type="month"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
 
      <el-form-item v-if="listQuery.Time == 'Day'">
        <el-date-picker
          v-model="DayTime"
          key="'day'"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
 
      <el-form-item v-if="listQuery.Time == 'Scope'">
        <el-date-picker
          v-model="ScopeTime"
          key="'scope'"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容