# dxw-organization-tree

> 组织选择器

Latest version **0.1.2** (published 2021-06-30) · 0 weekly downloads

## Install

```sh
npm install dxw-organization-tree
pnpm add dxw-organization-tree
yarn add dxw-organization-tree
bun add dxw-organization-tree
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-06-30 |
| First published | 2021-06-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 (+26 in 3 direct dependencies) |
| Install scripts | no |
| Maintainers | liuzhiwei123 |
| Keywords | 大连信维, 组织选择 |

## Links

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

## Dependencies (6)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [axios](https://npm.io/package/axios.md) ^0.21.1
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [node-sass](https://npm.io/package/node-sass.md) ^6.0.0
- [sass-loader](https://npm.io/package/sass-loader.md) ^7.0.3
- [element-plus](https://npm.io/package/element-plus.md) ^1.0.2-beta.46

## Recent versions

- 0.1.2 (latest) — 2021-06-30
- 0.1.1 — 2021-06-30
- 0.1.0 — 2021-06-30
- 0.0.9 — 2021-06-30
- 0.0.7 — 2021-06-30
- 0.0.6 — 2021-06-30
- 0.0.5 — 2021-06-30
- 0.0.4 — 2021-06-30
- 0.0.3 — 2021-06-30
- 0.0.2 — 2021-06-28
- 0.0.1 — 2021-06-24

## README

<p align="center">
  <h1>组织选择器</h1>
</p>

<h2>基于ElementPlus的Vue.js 3.0</h2>
<h2>组件适用于大连信维科技有限公司内部人员使用</h2>

- # `使用`
  ```javascript
  import OrganizationTree from 'dxw-organization-tree'
  import 'dxw-organization-tree/dist/dxw-organization-tree.css'
  ```
  - ## `mode=tree`
    ```javascript
    <organization-tree v-model="organizationsData" :env-var="process.env.NODE_ENV"/>
    ```

  - ## `mode=dialogTree`
    ```javascript
    <organization-tree v-model="organizationsData" :env-var="process.env.NODE_ENV" mode="dialogTree" v-model:showDialog="dialogVisible">
        <el-button @click="dialogVisible = true">点击打开 Dialog</el-button>
    </organization-tree>
    ```

  - ## `mode=popTree`
    ```javascript
    <organization-tree v-model="organizationsData" :env-var="process.env.NODE_ENV" mode="popTree">
      <el-button>click 激活pop</el-button>
    </organization-tree>
    ```

- # `Props`
  | 参数         | 说明   |  类型   | 可选值	  |默认值	  |
  | ----        | ----        |  ----   | ----  |----  |
  | envVar     | 访问api的环境域      | string   | development/test/production |*必须	    |
  | v-model     | 绑定值      | object   | — |—	    |
  | render-after-expand    | 是否在第一次展开某个树节点后才渲染其子节点    | boolean  | — |true |
  | lazy    | 是否懒加载子节点，需与 load 方法结合使用    | boolean  | — |false |
  | load        | 加载子树数据的方法，仅当 lazy 属性为true 时生效  | function(node, resolve)    | — | — |
  | default-expand-all    | 是否默认展开所有节点    | boolean  | — |false |
  | multiple    | 是否多选    | boolean  | — |false |
  | auto-expand-parent    | 展开子节点的时候是否自动展开父节点	    | boolean  | — |false |
  | default-expanded-keys    | 默认展开的节点的 code 的数组    | array  | — |— |
  | indent    | 相邻级节点间的水平缩进，单位为像素    | number  | — |16 |
  | accordion    | 是否每次只打开一个同级树节点展开    | boolean  | — |false |
  | icon-class    | 自定义树节点的图标    | string  | — |true |
  | all-levels    | 数据name是否级联	    | boolean  | — |true |
  | filterable    | 是否启用筛选功能	    | boolean  | — |true |
  | mode    | tree的模式	    | string  | tree/dialogTree/popTree |tree |
  | show-dialog    | 是否显示 Dialog,须指定tree的模式为'dialogTree',如传入slot不需指定此prop	    | boolean  | — |— |
  | dialog-width    | Dialog 的宽度,须指定tree的模式为'dialogTree'	    | string / number  | — |50% |
  | pop-trigger    | pop触发方式,须指定tree的模式为'popTree'	    | string  | click/focus/hover/manual |click |
  | pop-width    | pop宽度,须指定tree的模式为'popTree'	    | String, Number  | — |最小宽度 150px |
  | pop-placement    | 出现位置,须指定tree的模式为'popTree'	    | string  | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |bottom |
- # `Slot`
  | name         | 说明   | 默认元素
  | ----        | ----        | ----        |
  | —         | 触发Dialog/Popover的元素   |el-button|

- # `Events`
  | 事件名称         | 说明   |  回调参数   |
  | ----        | ----        |  ----   |
  | node-click     | 节点被点击时的回调	      | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。   |
  | node-contextmenu     | 当某一节点被鼠标右键点击时会触发该事件		      | 共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。   |
  | check-change     | 节点选中状态发生变化时的回调	      | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点   |
  | check     | 当复选框被点击的时候触发	      | 共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性   |
  | current-change     | 当前选中节点变化时触发的事件	      | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象   |
  | node-expand     | 节点被展开时触发的事件	      | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身   |
  | node-collapse     | 节点被关闭时触发的事件	      | 共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身   |

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