# remote-tree

> lazy remote tree based on element-ui tree

Latest version **1.0.2** (published 2022-04-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install remote-tree
pnpm add remote-tree
yarn add remote-tree
bun add remote-tree
```

## 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.2 |
| Published | 2022-04-14 |
| First published | 2022-04-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 49 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Eugene |
| Maintainers | quanyideng |
| Keywords | el-tree, lazy-tree |

## Links

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

## Recent versions

- 1.0.2 (latest) — 2022-04-14
- 1.0.1 — 2022-04-14
- 1.0.0 — 2022-04-14

## README

# remote-tree

## 功能
* 拓展 el-tree 组件，懒加载模式，可通过接口远程搜索，以达到过滤节点的效果
* 增加节点双击事件，双击节点默认会展开节点

### 安装
```
npm install remote-tree
```

### 引用
```
import Vue from "vue"
import App from './App'
import RemoteTree from "remote-tree"
import "remote-tree/index.css"

Vue.use(RemoteTree)

new Vue({
  el: '#app',
  render: h => h(App)
})
```

### 使用
```
<template>
  <remote-tree
      ref="tree"
      tree-height="calc(100vh - 300px)"
      :input.sync="filterText"
      :remote-lazy-search="true"
      node-key="id"
      :expand-on-click-node="false"
      :load="loadNode"
      lazy
      :props="defaultProps"
      highlight-current
      :remote-filter-method="remoteFilterMethod"
      @node-single-click="handleSingleClick"
      @node-double-click="handleDoubleClick"
    />
</template>
<script>
  data() {
    return {
      filterText: "",
      defaultProps: { children: "children", label: "label" },
    };
  },
  methods: {
    // 通过接口搜索
    remoteFilterMethod() {
      return new Promise((resolve, reject) => {
        api
          .getTreeInfo()
          .then((res) => {
            // res 为 tree 数据
            resolve(res.data);
          })
          .catch((err) => {
            reject(err);
          });
      });
    },
    // 节点单击事件
    handleSingleClick(data, node, vueComponent) {
      console.log("sigle click");
    },
    // 节点双击事件
    handleDoubleClick(data, node, vueComponent) {
      console.log("double click");
    },
    loadNode(node, resolve) {
      api
        .getTreeInfo()
        .then((res) => {
          resolve(res.data);
        })
        .catch((err) => {
          reject(err);
        });
    },
  }
</script>
```

### props

|  属性   | 说明  | 默认  |
|  ----  | ----  |  ----  |
| suffix  | 搜索输入框后置图标 |  el-icon-search |
| prefix  | 搜索输入框后置图标  |  无  |
| placeholder  | -  |  请输入关键字  |
| clearable  | 是否显示清楚图标  |  true  |
| input  | 输入框输入的内容  |  无  |
| treeHeight  | 树的高度  |  200px  |
| preventDoubleClick  | 是否阻止双击事件  |  false  |
| remoteSearch  | 是否开启远程搜索  |  false  |
| remoteSearch  | 是否开启远程搜索  |  false  |
| remoteLazySearch  | 是否开启懒加载远程搜索  |  false  |
| remoteFilterMethod  | 远程搜索方法  |  function() {}  |
| 其它  | 继承 el-tree 的属性  |  -  |

[el-tree 文档](https://element.faas.ele.me/#/zh-CN/component/tree)

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