出现改问题的原因是 下拉的定位信息在body中,只需要将定位置于父组件即可解决。 

  <el-select :teleported="false" v-model="dropDownChosedData.voltageLevel" placeholder="电压" @change="upDateDropDown">
          <el-option
                    v-for="item in dropdownData.voltageLevelList"
                     :key="item.code"
                     :label="item.code"
                     :value="item.name"
         />
</el-select>

在el-select 中添加 :teleported="false"   既可解决

                                                <el-popover
                                                    :offset='1'
                                                    ref="popover"
                                                    placement="top"
                                                    trigger="click"
                                                    :teleported='false'
                                                    :popper-options="{boundariesElement:'viewport',removeOnDeatory:true}"
                                                >
                                                    <template #reference>
                                                        <div style="text-align:center;" :style="{width: item.width + 'px',height: item.height + 'px',}" class="xl-flex xl-column xl-center">
                                                            <img class="position-map-icon" src="../../assets/images/prodectDetail/bottom-img-icon.png" v-if="item.fileList.length!=0" alt="" />
                                                            <span style="padding:0 6px">{{ item.projectStatusName }}</span>
                                                            <span >{{ item.statusCode }}</span>
                                                        </div>
                                                    </template>
                                                    <!-- 内容区内容 -->
                                                    <div class="position-map-content" >
                                                        <div v-if="item.fileList.length!==0">
                                                            
                                                            <a v-for="(i,index) in item.fileList" :key="index" :href="i.filePath" download target="_blank">
                                                                <div class="xl-flex position-map-content-download" >
                                                                    <img src="../../assets/images/prodectDetail/detailAnnex.png" alt="">
                                                                    <span style="">{{i.fileName}}</span>
                                                                    <img src="../../assets/images/prodectDetail/download-icon.png"  alt="">
                                                                </div>
                                                            </a>
                                                        </div>
                                                        <div v-if="item.fileList.length==0" style="text-align: center;margin-top: 28px;">
                                                            <span style="color:#00c9ff">暂无支撑材料</span>
                                                        </div>
                                                    </div>
                                                </el-popover>

或者    el-select 下拉 出现偏移的设置:(   :popper-append-to-body="false"  )

              <div class="form_item">
                <el-select
                  filterable
                  @focus="setOptionWidth"
                  v-model="form.param.communityCode"
                  placeholder="请选择所属社区"
                  :popper-append-to-body="false"
                  clearable
                >
                  <el-option
                    :style="{ width: selectOptionWidth }"
                    v-for="i in community"
                    :key="i.code"
                    :label="i.name"
                    :value="i.code"
                  ></el-option>
                </el-select>
              </div>

el-date-picker 下拉出现偏移的设置 (:append-to-body="false")

                <el-date-picker
                  :teleported="false"
                  key="time2"
                  v-model="powerSuccessTime"
                  value-format="timestamp"
                  :append-to-body="false"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>

其他的element 组件下拉出现位置偏移:也可以通过

:append-to-body="false"  或   :popper-append-to-body="false"   进行设置

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐