Vue Tree View - Hierarchical Data Structure

Use the following properties to bind the TreeView to hierarchical data:

items[]
Assigns a local array as done in this demo.
dataSource
Assigns a DataSource object that allows you to perform data shaping operations and use a remote source.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the TreeView features used.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

<template> <div class="form"> <DxTreeView id="simple-treeview" :items="products" :width="300" @item-click="selectItem" /> <div v-if="currentItem.price" id="product-details" > <img :src="currentItem.image"> <div class="name">{{ currentItem.text }}</div> <div class="price">{{ "$" + currentItem.price }}</div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxTreeView from 'devextreme-vue/tree-view'; import service from './data.ts'; const products = service.getProducts(); const currentItem = ref(products[0]); function selectItem({ itemData }) { currentItem.value = itemData; } </script> <style scoped> #simple-treeview, #product-details { display: inline-block; } #product-details { vertical-align: top; width: 400px; height: 420px; margin-left: 20px; } #product-details > img { border: none; height: 300px; width: 400px; } #product-details > .name { text-align: center; font-size: 20px; } #product-details > .price { text-align: center; font-size: 24px; } .dark #product-details > div { color: #f0f0f0; } .hidden { visibility: hidden; } </style>

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <script type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

Each object in the TreeView's hierarchical data structure should include the following fields:

id
Unique item identifier.
text
Text displayed by the item.
items
Nested objects (optional).

You can respectively use the keyExpr, displayExpr, and itemsExpr properties to specify custom names for the above-mentioned fields. Node objects can also include developer-defined fields and properties from this help section: items[].

In this demo, nodes use the expanded property, which specifies whether a node is collapsed or expanded. They also include the developer-defined price and image fields.

To get started with the DevExtreme TreeView component, refer to the following tutorial for step-by-step instructions: Getting Started with TreeView.