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

<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;
}