vue中的treeselect下拉框显示不全的解决办法

最新推荐文章于 2025-07-28 16:16:58 发布

原创最新推荐文章于 2025-07-28 16:16:58 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章讲述了在Vue框架中的Treeselect组件下拉框显示不全的问题，通过设置`appendToBody`属性为`true`和`z-index`为`9000`来提高堆叠顺序，确保下拉框可见并解决滚动条问题。

:appendToBody=“true” z-index=“9000”

如图：页面中显示的下拉框信息展示不全，就看不见了，也没有滚动条

treeselect下拉框显示的信息不全

解决办法：在代码中添加属性【:appendToBody=“true” z-index=“9000”】

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

appendToBody 属性设置为true

            <treeselect v-model="giveForm.deptId" 
                        :options="deptOptions" 
                        :show-count="true" 
                        :appendToBody="true" 
                        z-index="9000" 
                        placeholder="请选择校区" 
                        style="width: 200px"/>

成功解决，如图

解决啦