npm package: @fattypanda/vue-treeselect
Description: A multi-select component with nested options support for Vue.js
Author: Riophae Lee
Latest version: 0.4.3

### Getting Started

```bash
npm install --save @fattypanda/vue-treeselect
```
## 文档
基本文档请参考 https://vue-treeselect.js.org/

## 扩展
#### props
###### renderArrowIcon
自定义渲染前方箭头

类型`function`，默认值`void 0`，优先级大于`slot['arrow-icon']`；

参数：
* node: this.node
* menu: this.menu
* shouldExpand: this.shouldExpand
* shouldShow: this.shouldShow
* shouldFlattenOptions: instance.shouldFlattenOptions
* arrowClass
* h: this.$createElement
```vue
<template>
  <div id="app">
    <TreeSelect
      v-model="value"
      :options="options"
      :render-arrow-icon="({ shouldExpand, h }) => {
        return h('div', shouldExpand ? '-' : '+')
      }"
    />
  </div>
</template>

<script>
  // import the component
  import TreeSelect from '@fattypanda/vue-treeselect'
  // import the styles
  import '@fattypanda/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { TreeSelect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>
```

###### renderOptionLabel

自定义渲染OptionLabel

类型`function`，默认值`void 0`，优先级大于`slot['option-label']`；

参数：
* node
* shouldShowCount
* count
* labelClassName
* countClassName
* h: this.$createElement
```vue
<template>
  <div id="app">
    <TreeSelect
      v-model="value"
      :options="options"
      :render-option-label="({ labelClassName, countClassName, node, shouldShowCount, count, h }) => {
        return h('div', { class: labelClassName, attrs: { title: node.label } }, [
          node.label,
          shouldShowCount ? h('span', { class: countClassName }, `(${count})`) : void 0,
        ])
      }"
    />
  </div>
</template>

<script>
  // import the component
  import TreeSelect from '@fattypanda/vue-treeselect'
  // import the styles
  import '@fattypanda/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { TreeSelect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>
```

#### slots
###### arrow-icon
自定义渲染前方箭头，`scope`为节点`vue`组件对象，优先级小于`props.renderArrowIcon`；
```vue
<template>
  <div id="app">
    <TreeSelect v-model="value" :options="options" >
      <template slot="arrow-icon" slot-scope="{shouldExpand}">
        <div>{{shouldExpand? '-': '+'}}</div>
      </template>
    </TreeSelect>
  </div>
</template>

<script>
  // import the component
  import TreeSelect from '@fattypanda/vue-treeselect'
  // import the styles
  import '@fattypanda/vue-treeselect/dist/vue-treeselect.css'

  export default {
    // register the component
    components: { TreeSelect },
    data() {
      return {
        // define the default value
        value: null,
        // define options
        options: [ {
          id: 'a',
          label: 'a',
          children: [ {
            id: 'aa',
            label: 'aa',
          }, {
            id: 'ab',
            label: 'ab',
          } ],
        }, {
          id: 'b',
          label: 'b',
        }, {
          id: 'c',
          label: 'c',
        } ],
      }
    },
  }
</script>
```

## LOGS
2020-07-15:

修改`Treeselect`组件
1. 支持`renderOptionLabel`参数；

修改`Option`组件的`renderLabel`函数
1. 从`Treeselect`组件获取`renderOptionLabel`渲染组件（保留了原本的`slots['option-label']方式`）；
2. 默认`<label class={labelClassName}>`修改为`<label class={labelClassName} title={node.label}>`

2020-07-14:

修改`Treeselect`组件
1. 支持`renderArrowIcon`参数；
2. 支持`slots['arrow-icon']'`；

修改`Option`组件的`renderArrow`函数
1. 从`Treeselect`组件获取`renderArrowIcon`、`slots['arrow-icon']'`渲染组件；