element dialog对话框中select/cascader 弹窗不跟随问题

Element 在使用对话框中出现的情况

Select 选择器
Cascader 级联选择器
在这两种组件组合使用是出现了滑动 弹出框不跟随情况，如下

出现这种情况原因是因为弹出框相对的位置是body，展示后，如果body不动，所以弹窗位置不会发生改变。

Select 选择器

popper-append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false

Cascader 级联选择器

append-to-body 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false
这两个组件相对body是true，所以弹窗不会发生跟随的情况

如何解决

对于这种情况如何修改为弹窗跟随情况呢？
Select 选择器

<div class="selectFollow">
              <el-select v-model="llyForm.productType" placeholder="请选择产品状态" :popper-append-to-body="false" popper-class="myHeightCascader" @change="productTypeChange">
                <el-option v-for="(item,index) in productTypeArray" :key=index :label="item.text" :value="item.id">
                </el-option>
              </el-select>
</div>


.selectFollow {
  position: relative;
  .myCascader {
    position: absolute !important;
    top: 40px !important;
    left: 0;
  }
}

Cascader 级联选择器

<div class="areaCity>
<el-cascader placeholder="选择区域(可搜索)" filterable v-model="areaNoBlock" :append-to-body="false" popper-class="myCascader" :options="cityDataAry" :props="optionProps" :show-all-levels="false" ref="cascaderHandle"></el-cascader>
</div>

.areaCityTail {
  position: relative;
  .myCascader {
    position: absolute !important;
    top: 40px;
    left: 0;
  }
}

这两种组件在对话框内弹窗不跟随修改方案是不将弹出框插入至 body 元素，然后重新将组件弹窗相对位置调整实现跟随。

欢迎点赞/收藏