@fattypanda/vue-treeselect

Getting Started

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

<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

<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；

<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']'渲染组件；