# q-vue2-virtual-tree

> 安装 * `npm i @qhh/vue2-virtual-tree`

Latest version **0.1.1** (published 2021-07-19) · 0 weekly downloads

## Install

```sh
npm install q-vue2-virtual-tree
pnpm add q-vue2-virtual-tree
yarn add q-vue2-virtual-tree
bun add q-vue2-virtual-tree
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-07-19 |
| First published | 2021-07-19 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 57.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | qhh |
| Maintainers | qhh |

## Links

- npm: https://www.npmjs.com/package/q-vue2-virtual-tree
- npm.io page: https://npm.io/package/q-vue2-virtual-tree

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) 2.6.14

## Recent versions

- 0.1.1 (latest) — 2021-07-19
- 0.1.0 — 2021-07-19

## README

#虚拟树


安装 
* `npm i @qhh/vue2-virtual-tree`

使用 
* `import { VirtualTree } from '@qhh/vue2-virtual-tree'`
    
* `import '@qhh/vue2-virtual-tree/dist/style.css'`

node 节点样例
```json5
{
  id: 0,
  label: "全部",
  parentId: null, // 根节点的 parentId 必须为 null
  disabled: false, // 可选
  children: [
    {
      id: 1,
      label: '全部',
      parentId: 0, // 根节点的 parentId 必须为 null
      disabled: false, // 可选
      children: null
    }
  ]
}
```

## Attributes
| 参数                 | 说明                                                                         | 类型            | 可选值                                            | 默认值          |
| ------              | :-----                                                                       | :-----         | :-----                                          | :-----        |
| options             | 树形结构默认为{labelKey: 'label', childrenKey: 'children', parentIdKey: 'parentId', idKey: 'id', extendCountKey: null, disabledKey: 'disabled'}  labelKey: 显示的文本字段, childrenKey: 子级的字段, parentIdKey: 父级id字段, idKey: id字段, extendCountKey: 额外的显示数量字段. 如: 需要显示在线数 节点在线字段为online: true, 则此值为'online'. 注: 此处只能显示默认为true 的字段, 如需离线数, 节点需新增字段 offline: true, disabledKey: 禁用的字段名  | Object         | :-----                                          | :-----        |
| hasInput            | 是否含有过滤输入框,输入框过滤支持多个关键词,逗号隔开(中英都可以),eg: '位置 1，位置 2,位置 3'| Boolean        | --                                              | false         |
| customSearch        | 自定义搜索块,配合searchKeyword                                                   | Boolean        | --                                              | false         |
| 配合searchKeyword    | v-model绑定值 , 用于搜索                                                        | String         | --                                              | ''            |
| placeholder         | 过滤输入框的 placeholder，配合 hasInput 使用                                      | String         | --                                              | 请输入关键字进行查找            |
| indent              | 缩进                                                                          | String, Number | --                                               | 15            |
| expandLevel         | 展开程度                                                                       | String, Number | 'all',1,2,3,,,                                   | 'all'            |
| expandKeys          | 指定 id 展开, 若指定 id 展开，则 expandLevel 失效                                  | Array          |                                                  | []           |
| expandIcon          | 自定义展开图标                                                                  | Number          |                                                  |  ---          |
| foldIcon            | 自定义折叠图标                                                                  | Number          |                                                  |  ---          |
| isLoading           | 是否展示'加载中...'指示状态                                                       | Boolean        | --                                               | false           |
| checkedAction       | 操作 label 执行选中                                                             | String         | 'none': 不选中；'click': 单击选中；'dblclick': 双击选中| 'none'           |
| emptyText           | 内容为空展示的文本                                                               | String         | --                                                | 暂无数据           |
| showCheckbox        | 是否展示 checkbox                                                              | Boolean         | --                                               | false           |
| showCheckboxLeafOnly| 是否仅叶子节点展示 checkbox, 配合 showCheckbox = true 才有效。                      | Boolean         | --                                              | false           |
| defaultCheckedKeys  | 默认选中, setData 之后赋值。                                                      | Array          | --                                               | []           |
| checkStrictly       | 在显示复选框的情况下，是否严格的遵循父子不互相关联的做法                                 | Boolean         | --                                               | false           |
| checkBoxSize        | 选择框的大小, 默认同时影响expand box的尺寸 ,除非自定义expandIcon的slot                | String          | ---                                             | 12px           |
| preCheckbox         | checkBox 是否前置(在左侧 而非右侧)                                                | Boolean          | ---                                             | true           |
| expandRotate        | 展开图标动画旋转的角度                                                            | Number          | ---                                              | 180           |
| labelClass          | 自定义label的样式                                                               | String          | ---                                              | ''           |
| itemClass           | 自定义item的样式                                                                | String          | ---                                              | ''           |
       

# 方法
| 方法名称              | 说明                                 | 参数                                                       | 
| ------              | :-----                               | :-----                                                    |
|setData              | 设置tree                              | tree(Array 类型)                                           |
|setCheckedKeys       | 回显选中状态                            | id 组成的数组                                               |
|setCheckedNodes      | 回显选中状态                            | node 节点组成的数组                                          |
|getCheckedKeys       | 返回id 组成的数组                       | --                                                         |
|getCheckedNodes      | 返回 node 节点组成的数组                 | --                                                         |
|clearChecked         | 清空所有选中                            | --                                                         |
|setExpand            | 指定 id 展开                           | id 组成的数组                                                |
|showCheckedOnly      | 只展示选中的项，此方法会置空过滤条件         | isOnlyInCheckedSearch, 是否只在选中的节点里进行筛选, 默认 true   |
|restore              | 对 showCheckedOnly 之后进行恢复         | --                                                         |
|update               | 手动更新选中状态                         | --                                                         |
|clear                | 清空内存占用                            | --                                                         |

# Events
| 事件名称             | 说明                                 | 回调参数                                               | 
| ------              | :-----                              | :-----                                               |
|onChange            | 选中状态变化触发                        | （{ checkedKeys, checkedNodes })                      |
|onClickLabel        | 点击 label 触发                        | node                                                 |
|onClickCheckbox     | 点击 checkbox 触发, 获取当前点击的节点    | node                     |


# Scoped Slot
| name      | 说明                                                                                                                           | 
| ------    | :-----                                                                                                                         |
|default    |  label 的 slot， eg： ```<template  #default="{ slotScope }"><span><i>&#9733;</i> {{ slotScope.label }}</span></template>```    | 
|preInput   |  input 输入框前的 slot， eg： ```<template #preInput><span>https://</span></template> ```                                         |
|loading    |  自定义加载中 slot， eg： ```<template #loading><i>加载中...</i></template> ```                                                    |
|expandIcon |  自定义展开图标 slot， eg： ```<template #expandIcon={ slotScope }><img v-if='slotScope.expand' src="expand.jpg" /><img v-else src='flod.jpg' /></template>```                                         |
|customSearch|  自定义搜索部分 具体例子如下： |

customSearch：
```html
<!--search为搜索事件， 把keyword传入-->
<!--reset为 清空搜索事件 ,本页的keyword需自己清空!-->
<template #customSearch="{ search, reset }">
  <div class="input">
    <label>
      <input
        type="text"
        class="filter-input"
        placeholder="请输入"
        v-model="keyword"
      />
    </label>
    <i
      class="clear-input"
      v-if="keyword"
      @click="reset();keyword = '';"
    ></i>
    <button class="search-btn" @click="search(keyword)">搜索</button>
  </div>
</template>
```

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