element selecleTree 下拉树，el-select与el-tree结合

最新推荐文章于 2024-05-17 20:06:44 发布

原创

最新推荐文章于 2024-05-17 20:06:44 发布 · 460 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了如何在Vue.js项目中使用Element UI的el-select组件与el-tree组件结合，创建一个下拉树的选择效果。通过JavaScript实现下拉树的高度自适应，达到良好的用户体验。

html:

<el-select
     clearable
     v-model="form.organ_no"
     placeholder="请选择"
     popper-class="select_tree-drop"
     ref="selectTreeBox"
     @clear="clearDeptSelectTree"
>
     <el-option
         :value="form.organ_no"
         :label="form.organ_name"
     >
         <el-tree
             :data

最低0.47元/天解锁文章

3 条评论

weixin_44744174 2021.09.13
你好，你的popper-class的样式是怎么写的，我用的这个方式写，下拉选项只能展示一行，树形结构被挡住了
- versious回复weixin_44744174 2021.09.14
  设置org-select-item，因为我不是在scoped里写的，所以没有加上穿透
- versious回复weixin_44744174 2021.09.14
  .select_tree-drop { .el-scrollbar__view { max-height: 300px; } .is-current > .el-tree-node__content { color: #409eff; } .el-select-dropdown__item.selected { font-weight: 500; } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: #fff; } .org-select { width: 100%; } .org-select-item { height: auto; background: #fff; overflow: auto; max-width: 500px; } // 超出换行 .el-tree-node__content, .el-tree-node { word-break: break-all; white-space: initial; } .el-tree-node__content { line-height: 24px; height: auto; align-items: flex-start; } } 我设置了最高300px，最宽500px并且换行，不需要的话你把多余的代码去掉哈