vue-decision-tree
Mainly relies on CSS Flexible Box. See compatibility: https://caniuse.com/#search=Flexible
Install:
npm i vue-decision-tree -S
Use:
<template>
<div>
<decision-tree :data="mockData"/>
<!-- <decision-tree
:data="mockData"
#default="{ node, data }"
>
<template>
<span>{{ data.label }}</span>
</template>
</decision-tree> -->
</div>
</template>
<script>
import DecisionTree from 'vue-decision-tree'
export default {
components: { DecisionTree },
data() {
return {
mockData: [
{
label: '1',
children: [{ label: '12' }, { label: '13' }],
},
],
}
},
}
</script>
props
Props | Type | Description |
---|---|---|
data | Array |
data |
hSpacing | Number |
horizontal spacing, defaults to 16 (px) |
vSpacing | Number |
vertical spacing, defaults to 48 (px) |
lineColor | String |
defaults to #000 |
direction | String |
options: ltr / rtl / ttb / btt, defaults to ltr |
props | Object |
defaults to { children: 'children', label: 'label' } |
slot
Props | Description |
---|---|
- |
Custom content for the node, the scope parameter is { node, data } |