vt
@fattypanda/vue-treeselect
npm i @fattypanda/vue-treeselect
vt

@fattypanda/vue-treeselect

A multi-select component with nested options support for Vue.js

by Fangzhou Li

0.4.3 (see all)License:MITTypeScript:Not Found
npm i @fattypanda/vue-treeselect
Readme

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组件获取renderArrowIconslots['arrow-icon']'渲染组件;
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate