页面缩放后，对于Element UI 下拉框和级联选择器位置错乱问题

最新推荐文章于 2024-05-22 13:59:56 发布

原创最新推荐文章于 2024-05-22 13:59:56 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

在Vue项目中，当使用ElementUI的el-select和el-cascader组件时，通过设置:popper-append-to-body=false和:append-to-body=false可以避免下拉框跟随滚动。这适用于需要保持下拉框相对其父元素定位的情况，同时提到了组件的filterable属性和change事件的使用。

对于el-select来说添加 :popper-append-to-body = “false” 即可.
对于el-cascader来说添加 :append-to-body=“false” 即可.

<el-cascader
                    v-if="showCity"
                    ref="sysCascader"
                    v-model="form.region1"
                    size="small"
                    :append-to-body="false"
                    :props="cascaderProps"
                    :show-all-levels="true"
                    filterable
                    class="w-full"
                    separator="-"
                    clearable
                    @change="regionChanged"
                  />