# k-tree-select

> 用清晰的层级结构展示信息，可下拉选择、展开或折叠，提供单选多选功能，支持v-model双向数据绑定

Latest version **0.1.0** (published 2019-03-06) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-03-06 |
| First published | 2019-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 360.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | SoldierAb |
| Maintainers | cgj |

## Links

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

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.17
- [vuex](https://npm.io/package/vuex.md) ^3.0.1
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1

## Recent versions

- 0.1.0 (latest) — 2019-03-06

## README

# `|` VUE 树形控件
### 用清晰的层级结构展示信息，可下拉选择、展开或折叠，提供单选多选功能，支持v-model双向数据绑定
## 安装
```
npm i k-tree-select
```

## 使用

```html
<template>
  <div>
   <tree-select
      only-leaf
      show-checkbox
      type="tree"
      v-model="selectValue"
      :label-key="labelKey"
      :value-key="valueKey"
      :data-source="list"
      @on-toggle-expand="toggleExpand"
      @on-select-change="selectChange"
      @on-check-change="checkChange"
    ></tree-select>
  </div>
</template>

<script>
import TreeSelect from "@idev4/k-tree-select";

// Vue.use(TreeSelect)   

export default {
  components: {TreeSelect},
  data() {
    return {
        list: [
        {
          name: "霍山县",
          pId: "341500000000000",
          open: "False",
          id: "341525000000000",
          children: [
            {
              name: "衡山镇",
              pId: "341525000000000",
              open: "False",
              id: "341525100000000"
            },
            {
              name: "与儿街镇",
              pId: "341525000000000",
              open: "False",
              id: "341525104000000"
            },
            {
              name: "黑石渡镇",
              pId: "341525000000000",
              open: "False",
              id: "341525105000000"
            },
            {
              name: "诸佛庵镇",
              pId: "341525000000000",
              open: "False",
              id: "341525106000000"
            },
            {
              name: "高桥湾现代产业园",
              pId: "341525000000000",
              open: "False",
              id: "341525401000000"
            }
          ]
        }
      ],
      showCheckBox: false,
      type:'select',
      labelKey: "name",
      valueKey: "id",
      childrenKey:'children',
      selectValue:'341525401000000',       //双向数据绑定当前选中值
    };
  },
  mounted(){
    setTimeout(()=>{
      this.selectValue = "341525106000000";
    },3000)
  },
  watch:{
      selectValue(){
          console.log('selectValue',this.selectValue);
      },
  },

  methods: {
    toggleExpand(node){
      console.log('toggleExpand',node);
    },
    selectChange(node){
      console.log('selectChange',node);
    },
    checkChange(nodes){
      console.log('checkChange',nodes);
    },
  }
};
</script>




```

### `|` Attributes
|  属性  |  说明   |  类型|可选值|默认值|是否必须|
|-------|---------|------|------|----|--------|
|dataSource|数据源| Array | - |-  |是|
|labelKey|数据显示key|String| -|label|是|
|valueKey|取值key (不传默认传递节点完整数据)|String|-|value|-|
|childrenKey|子集key|String|-|children|-|
|v-model|双向数据绑定 , `props需传入valueKey，为 “,” 拼接的字符串`|String|-|-|-|
|multiple|单击多选|-|-|-|-|
|only-leaf|只取叶子节点数据|-|-|-|-|
|show-checkbox|开启复选框（`复选框开启，v-model初始化可只传入需要选中的顶层节点的value`）|-|-|-|-|
|img-source|图标|Object|node:'(img path)'、leaf:'(img path)'、caretRight:'(img path)'、caretDown:'(img path)',|-|-|
|props|dataSource数据配置选项具体看下表|-|-|-|-|



### `|` Props


|  参数  |  说明   | 类型  | 默认值|  是否必须|
|-------|---------|------|--------|----------|
|selected|节点单选选中|Boolean|-|-|
|checked|节点多选选中|Boolean|-|-|
|expand|节点展开|Boolean|-|-|



### `|` Events
| 方法名 | 说明 | 参数|
| ------ |----- | ---- |
|on-toggle-expand|节点被点击展开收缩的时触发|传递 `dataSource` 属性的数组中该节点所对应的对象 （ 对象中`expand`属性即当前展开状态 ）|
|on-select-change|Attributes不含show-checkbox，节点被点选的时触发|传递 `dataSource` 属性的数组中所选中的对象 |
|on-check-change|Attributes含show-checkbox，节点checkbox被点击的时触发|传递 `dataSource` 属性的数组中所选中的对象 |


### `|` methods
| 方法名 | 说明 | 参数|
| ------ |----- | ---- |
|getSelectedNodes|获取当前单击选中的所有节点|-|
|getCheckedNodes|获取当前多选选中的所有节点|-|

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