elementUI级联选择器自定义定位，不随页面滑动

偷一只猪ma

于 2021-08-11 16:18:21 发布

阅读量694

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_49392771/article/details/119609139

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用ElementUI的级联选择器(cascader)进行自定义定位，通过设置`placement`属性可以改变浮层的默认显示位置，例如设置为`right`使其显示在右侧。此外，通过添加`popper-class`属性并配合CSS，可以实现浮层固定在特定位置，如顶部250px，并确保其在页面滚动时不随内容移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认效果

在这里插入图片描述
默认浮层显示在下方

快捷定位

添加placement属性：top、bottom、left、right

<el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="optionsArr"
            v-model="statusform.status"
            size="small"
            ref="cascaderHandle"
            :show-all-levels="false"
            placement="right" 
          >
</el-cascader>

效果如图：
在这里插入图片描述

自定义定位

添加popper-class属性，自定义浮层类名

<!--html代码-->
<el-cascader
            :change-on-select="true"
            :props="defaultParams"
            :options="optionsArr"
            v-model="statusform.status"
            :clearable="true"
            :show-all-levels="false"
            popper-class="myCascader"
          >
</el-cascader>

/*css代码*/
.el-popper.myCascader {
    top: 250px !important;
}

效果如图：浮层固定在距离顶部250px处，不随页面滑动而样式脱离
在这里插入图片描述