el-select+el-tree实现树形选择器

自定义el-select+el-tree实现树形选择器

最新推荐文章于 2025-09-24 12:41:09 发布

原创最新推荐文章于 2025-09-24 12:41:09 发布 · 1.2k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

笔记专栏收录该内容

2 篇文章

订阅专栏

本文描述了如何使用Vue的ElementUI库中的el-select和el-tree组件，通过自定义slot避免复杂交互，实现简洁的树形选择器。作者分享了具体的代码片段和样式设置，以实现在select中嵌套动态生成的tree结构。

el-select+el-tree实现树形选择器

看别人写的select+tree实现树形选择器比较奇葩，具体实现是将整个tree放入一个select-item，需要自己写交互逻辑，很麻烦，所以自己使用tree的slot写入item

<el-select
  v-model="tempPermission.parentId"
  :placeholder="showInput === 2 ? '请选择上级菜单' : '请选择所属菜单'"
  style="width: 100%"
  popper-class="tree-select"
>
  <el-tree
    :data="allPermission"
    node-key="id"
    auto-expand-parent
    :default-checked-keys="[tempPermission.parentId]"
    :expand-on-click-node="false"
  >
    <template slot-scope="{ data }">
      <el-option
        :key="data.id"
        style="width: 100%"
        :value="data.id"
        :label="data.name"
      />
    </template>
  </el-tree>
</el-select>

.tree-select {
  padding: 5px 2px;
}

.tree-select .el-tree {
  max-height: 200px;
}

.tree-select .el-select-dropdown__item {
  padding: 0 5px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
}

.tree-select .el-select-dropdown__item.hover {
  background-color: #E6F7FF;
}

.tree-select .el-tree .el-tree-node__content:hover {
  background: #ffffff;
}

.tree-select .el-tree .el-tree-node:focus > .el-tree-node__content {
  background-color: #ffffff;
}

实现效果