# tree-select-infinite

> ## 说明 支持无限滚动、多级菜单、多选以及前端搜索的```tree-select```组件 ![image](https://github.com/ashes167/tree-select-vue/blob/master/screenshot.gif)

Latest version **1.0.5** (published 2021-04-09) · ISC license · 0 weekly downloads

## Install

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

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2021-04-09 |
| First published | 2021-03-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | pluto |
| Maintainers | pluto1219 |
| Keywords | tree, select, infinite, element-ui |

## Links

- npm: https://www.npmjs.com/package/tree-select-infinite
- npm.io page: https://npm.io/package/tree-select-infinite

## Recent versions

- 1.0.5 (latest) — 2021-04-09
- 1.0.4 — 2021-03-09
- 1.0.3 — 2021-03-08
- 1.0.2 — 2021-03-08
- 1.0.1 — 2021-03-08
- 1.0.0 — 2021-03-05

## README

# tree-select-vue

## 说明
支持无限滚动、多级菜单、多选以及前端搜索的```tree-select```组件 <br/>
![image](https://github.com/ashes167/tree-select-vue/blob/master/screenshot.gif)

## 使用方式
**注意⚠️:组件依赖于element-ui(版本需大于2.9.2)** <br/>

1、在src/components目录中找到```tree.vue```，复制到自己的项目中，然后引用，可以根据自己的需求自由更改。<br />
2、```npm install tree-select-infinite```
  > demo.vue
  ```
    <template>
      <div>
        <tree-select-infinite
          :treeData="list"
          v-model="value"
        ></tree-select-infinite>
      </div>
    </template>
    ```

    <script>
    import treeSelectInfinite from 'tree-select-infinite'
    export default {
      name: 'demo',
      components: {
        treeSelectInfinite
      },
      data() {
        return {
          list: [],
          value: ''
        }
      }
  ```
  > main.js
  ```
  import ElementUI from 'element-ui' //element-ui的全部组件
  import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
  Vue.use(ElementUI)
  ```
3、传值
 prop | example | type | 说明
| :----:| :----: | :----: | :----: |
| treeData | {value: 1, label: '1-1', children: [{value: 2, label: '2-1'}]} | Array | 传入的数据源 |
| filterCheckedNodes | (checked) => checked.filter(f => f.level > 2) | Function | 过滤输入框内展示的tag,如只level大于2的tag |
| formatTag | (tag) => tag.label + ' - ' + tag.level | Function | 格式化展示的tag |
| formatTreeNode | (node) => node.label + ' ' + node.value | Function | 格式化展示的tree node



## 本地查看

1. ```git clone 项目地址``` <br/>
2. ```cd tree-select-vue```
3. ```npm install```
4. ```npm run dev```
5. 构建：```npm run build```

  ```

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