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组件
- 支持
renderOptionLabel参数；
修改Option组件的renderLabel函数
- 从
Treeselect组件获取renderOptionLabel渲染组件（保留了原本的slots['option-label']方式）； - 默认
<label class={labelClassName}>修改为<label class={labelClassName} title={node.label}>
2020-07-14:
修改Treeselect组件
- 支持
renderArrowIcon参数； - 支持
slots['arrow-icon']'；
修改Option组件的renderArrow函数
- 从
Treeselect组件获取renderArrowIcon、slots['arrow-icon']'渲染组件；