# el-select-tree

> ElementUI's el-select combined with el-tree.

Latest version **2.1.2** (published 2026-06-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install el-select-tree
pnpm add el-select-tree
yarn add el-select-tree
bun add el-select-tree
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2026-06-08 |
| First published | 2019-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 169.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 185 |
| Author | yujinpan |
| Maintainers | yujinpan |
| Keywords | el-select, el-tree, el-select-tree |

## Links

- npm: https://www.npmjs.com/package/el-select-tree
- Repository: https://github.com/yujinpan/el-select-tree
- Homepage: https://github.com/yujinpan/el-select-tree#readme
- Issues: https://github.com/yujinpan/el-select-tree/issues
- npm.io page: https://npm.io/package/el-select-tree

## Dependencies (6)

- [core-js](https://npm.io/package/core-js.md) ^3.28.0
- [style-inject](https://npm.io/package/style-inject.md) ^0.3.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.24.7
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.x
- [vue-runtime-helpers](https://npm.io/package/vue-runtime-helpers.md) ^1.1.2
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.x

## Recent versions

- 2.1.2 (latest) — 2026-06-08
- 2.1.1 — 2025-11-18
- 2.1.1-beta.17 — 2024-11-14
- 2.1.1-beta.16 — 2024-09-30
- 2.1.1-beta.15 — 2024-06-18
- 2.1.1-beta.14 — 2024-05-29
- 2.1.1-beta.13 — 2024-05-28
- 2.1.1-beta.12 — 2024-05-17
- 2.1.1-beta.11 — 2024-05-14
- 2.1.1-beta.10 — 2024-04-25
- 2.1.1-beta.9 — 2024-03-04
- 2.1.1-beta.8 — 2024-02-23
- 2.1.1-beta.7 — 2024-02-23
- 2.1.1-beta.6 — 2024-01-16
- 2.1.1-beta.5 — 2024-01-10
- … 57 more at https://npm.io/package/el-select-tree/versions

## README

# el-select-tree

ElementUI's el-select combined with el-tree.

- Online examples [https://yujinpan.github.io/el-select-tree/](https://yujinpan.github.io/el-select-tree/)

> - 2.1 Support custom menu header/footer.
> - 2.1 `check-on-click-node` is available with `show-checkobx`, default is `false`. **Broken Change**
> - 2.1 `expand-on-click-node` is available, default is `true`.
> - 2.1 Support [virtual list](https://yujinpan.github.io/el-select-tree/#virtual).
> - 2.0 Comprehensively improve the utilization rate of original parts.

## Usage

### Install

```
npm install --save el-select-tree
```

### Require element-ui

If your project does not use element-ui,
you need to introduce a separate element-ui package, like this:

```js
import "el-select-tree/lib/element-ui";
```

### Global registration

```js
import Vue from "vue";
import ElSelectTree from "el-select-tree";

Vue.use(ElSelectTree);
```

### In-component registration

```js
import ElSelectTree from "el-select-tree";

export default {
  components: {
    ElSelectTree,
  },
};
```

### Complete example

```vue
<template>
  <el-select-tree
    width="120px"
    placeholder="请选择内容"
    :data="treeData"
    v-model="value"
  ></el-select-tree>
</template>

<script>
import ElSelectTree from "el-select-tree";

export default {
  components: {
    ElSelectTree,
  },
  data() {
    return {
      value: 2,
      treeData: [
        {
          value: 1,
          label: "text1",
          children: [
            { value: 5, label: "text5" },
            { value: 6, label: "text6" },
          ],
        },
        { value: 2, label: "text2" },
        { value: 3, label: "text3" },
        { value: 4, label: "text5" },
      ],
    };
  },
};
</script>
```

## Component API

**Extends `ElTree` And `ElSelect` All Props/Methods/Events/Slots.**

| props                                                                            | methods                                                                | events                                                                       | slots                                                                       |
| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| [el-select](https://element.eleme.io/#/zh-CN/component/select#select-attributes) | [el-select](https://element.eleme.io/#/zh-CN/component/select#methods) | [el-select](https://element.eleme.io/#/zh-CN/component/select#select-events) | [el-select](https://element.eleme.io/#/zh-CN/component/select#select-slots) |
| [el-tree](https://element.eleme.io/#/zh-CN/component/tree#attributes)            | [el-tree](https://element.eleme.io/#/zh-CN/component/tree#fang-fa)     | [el-tree](https://element.eleme.io/#/zh-CN/component/tree#events)            | [el-tree](https://element.eleme.io/#/zh-CN/component/tree#scoped-slot)      |

# Special Thanks

Special thanks to [JetBrains](https://www.jetbrains.com/?from=el-table-infinite-scroll)
for letting me use the free license.

![JetBrains](./jetbrains.svg)

---
_Source: https://npm.io/package/el-select-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._