Vue TreeView - Customize Node Appearance
For minor customization of nodes, you can define specific fields in node data objects. For example, the following code adds an icon to each node.
App.vue
- <template>
- <DxTreeView
- :items="hierarchicalData"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const hierarchicalData = [{
- id: '1',
- text: 'Fruits',
- icon: '/pics/fruits.ico',
- items: [
- { id: '1_1', text: 'Apples', icon: '/pics/fruits/apple.ico' },
- { id: '1_2', text: 'Oranges', icon: '/pics/fruits/orange.ico' }
- ]
- }, {
- id: '2',
- text: 'Vegetables',
- icon: '/pics/vegetables.ico',
- items: [
- { id: '2_1', text: 'Cucumbers', icon: '/pics/vegetables/cucumber.ico' },
- { id: '2_2', text: 'Tomatoes', icon: '/pics/vegetables/tomato.ico' }
- ]
- }];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- hierarchicalData
- };
- },
- };
- </script>
If you need a more flexible solution, define an itemTemplate.
App.vue
- <template>
- <DxTreeView
- :items="hierarchicalData">
- <template #item="item">
- <i>{{ item.data.text }}</i>
- </template>
- </DxTreeView>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const hierarchicalData = [{
- id: '1',
- text: 'Fruits',
- items: [
- { id: '1_1', text: 'Apples' },
- { id: '1_2', text: 'Oranges' }
- ]
- }, {
- id: '2',
- text: 'Vegetables',
- items: [
- { id: '2_1', text: 'Cucumbers' },
- { id: '2_2', text: 'Tomatoes' }
- ]
- }];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- hierarchicalData
- };
- },
- };
- </script>
You can also customize individual nodes. Declare them using the dxItem component.
App.vue
- <template>
- <DxTreeView>
- <DxItem>
- <template #default>
- <i>Apples</i>
- </template>
- </DxItem>
- <DxItem>
- <template #default>
- <p>Oranges</p>
- </template>
- </DxItem>
- </DxTreeView>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView, DxItem } from 'devextreme-vue/tree-view';
- export default {
- components: {
- DxTreeView,
- DxItem
- }
- };
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.