Vue Tree View - Plain Data Structure

The TreeView's plain (one-dimensional) array contains items each of which references its parent item.

Backend API

<template> <div class="form"> <DxTreeView id="simple-treeview" :items="products" :width="300" data-structure="plain" parent-id-expr="categoryId" key-expr="ID" display-expr="name" @item-click="selectItem" /> <div v-if="currentItem.price" id="product-details" > <img :alt="currentItem.name" :src="currentItem.icon" > <div class="name">{{ currentItem.name }}</div> <div class="price">{{ "$" + currentItem.price }}</div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxTreeView, { type DxTreeViewTypes } from 'devextreme-vue/tree-view'; import service from './data.ts'; import type { Product } from './types'; const products: Product[] = service.getProducts(); const currentItem = ref<Product>(products[0]); function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent<Product>) { if (itemData) { currentItem.value = itemData; } } </script> <style> #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 type { Product } from './types'; const products: Product[] = [{ ID: '1', name: 'Stores', expanded: true, }, { ID: '1_1', categoryId: '1', name: 'Super Mart of the West', expanded: true, }, { ID: '1_1_1', categoryId: '1_1', name: 'Video Players', }, { ID: '1_1_1_1', categoryId: '1_1_1', name: 'HD Video Player', icon: '../../../../images/products/1.png', price: 220, }, { ID: '1_1_1_2', categoryId: '1_1_1', name: 'SuperHD Video Player', icon: '../../../../images/products/2.png', price: 270, }, { ID: '1_1_2', categoryId: '1_1', name: 'Televisions', expanded: true, }, { ID: '1_1_2_1', categoryId: '1_1_2', name: 'SuperLCD 42', icon: '../../../../images/products/7.png', price: 1200, }, { ID: '1_1_2_2', categoryId: '1_1_2', name: 'SuperLED 42', icon: '../../../../images/products/5.png', price: 1450, }, { ID: '1_1_2_3', categoryId: '1_1_2', name: 'SuperLED 50', icon: '../../../../images/products/4.png', price: 1600, }, { ID: '1_1_2_4', categoryId: '1_1_2', name: 'SuperLCD 55', icon: '../../../../images/products/6.png', price: 1750, }, { ID: '1_1_2_5', categoryId: '1_1_2', name: 'SuperLCD 70', icon: '../../../../images/products/9.png', price: 4000, }, { ID: '1_1_3', categoryId: '1_1', name: 'Monitors', }, { ID: '1_1_3_1', categoryId: '1_1_3', name: '19"', }, { ID: '1_1_3_1_1', categoryId: '1_1_3_1', name: 'DesktopLCD 19', icon: '../../../../images/products/10.png', price: 160, }, { ID: '1_1_4', categoryId: '1_1', name: 'Projectors', }, { ID: '1_1_4_1', categoryId: '1_1_4', name: 'Projector Plus', icon: '../../../../images/products/14.png', price: 550, }, { ID: '1_1_4_2', categoryId: '1_1_4', name: 'Projector PlusHD', icon: '../../../../images/products/15.png', price: 750, }, ]; export default { getProducts() { return products; }, };

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

export interface Product { ID: string; name: string; expanded?: boolean; categoryId?: string; icon?: string; price?: number; }

<!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/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> <script src="bundles/vendor/vue.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

Use either of the following properties to bind the component to plain data:

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

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

id
Unique item identifier.
parentId
Identifier of the parent item.
text
Text displayed by the item.

You can respectively use the keyExpr, parentIdExpr, and displayExpr 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 icon and expanded properties. These properties specify the icon and whether a node is collapsed or expanded. Some nodes also include the developer-defined price field.