Closed tonyhayes closed 4 years ago
There is an example... https://jsfiddle.net/amsik/6jm2b1dq/?utm_source=website&utm_medium=embed&utm_campaign=6jm2b1dq
You don't change NodeContent... Define the data as described in the doc an add Your individual data in the data property. In Your the template which is embedded in a scoped slot You can do what You want with the node data even pass them to other components. Here the snippet from the fiddle above
<span class="tree-text" slot-scope="{ node }">
<template v-if="!node.hasChildren()">
<i class="ion-android-star"></i>
{{ node.text }} <<<---Here You can access your data
</template>
<template v-else>
<i :class="[node.expanded() ? 'ion-android-folder-open' : 'ion-android-folder']"></i>
{{ node.text }}
</template>
</span>
</tree>```
Do you have any advice on how to modify the tree to display/edit (for example) a date picker instead of just text. I would like to fork this and use to display a dynamic form (whose attributes exist in the node to determine a form component to display such as a date picker or dropdown, radio button ...). I think the NodeContent.vue is where I want to make the changes to support this ?