element 中select下拉框和el-popover下拉框 位置偏移的情况
在el-select中添加teleported="false"既可解决。同样添加teleported='false'
·
出现改问题的原因是 下拉的定位信息在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" 进行设置
更多推荐
已为社区贡献16条内容
所有评论(0)