Vue TreeView - Use Plain Data

If you use plain data in the TreeView, set the dataStructure property to "plain". For an example of plain data, see the following code snippet.

App.vue
  • <template>
  • <DxTreeView
  • data-structure="plain"
  • :data-source="plainData"
  • />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxTreeView } from 'devextreme-vue/tree-view';
  •  
  • const plainData = [
  • { id: '1', text: 'Fruits' },
  • { id: '1_1', text: 'Apples', parentId: '1' },
  • { id: '1_2', text: 'Oranges', parentId: '1' },
  • { id: '2', text: 'Vegetables' },
  • { id: '2_1', text: 'Cucumbers', parentId: '2' },
  • { id: '2_2', text: 'Tomatoes', parentId: '2' }
  • ];
  •  
  • export default {
  • components: {
  • DxTreeView
  • },
  • data() {
  • return {
  • plainData
  • };
  • },
  • };
  • </script>

As you can see, all items in a plain data source have the id and text fields, and items that have a parent, have the parentId field. Those are conventional field names. To use other names, change the keyExpr, displayExpr and parentIdExpr properties, respectively.

App.vue
  • <template>
  • <DxTreeView
  • data-structure="plain"
  • :data-source="plainData"
  • key-expr="key"
  • display-expr="name"
  • parent-id-expr="parent"
  • />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxTreeView } from 'devextreme-vue/tree-view';
  •  
  • const plainData = [
  • { key: '1', name: 'Fruits' },
  • { key: '1_1', name: 'Apples', parent: '1' },
  • { key: '1_2', name: 'Oranges', parent: '1' },
  • { key: '2', name: 'Vegetables' },
  • { key: '2_1', name: 'Cucumbers', parent: '2' },
  • { key: '2_2', name: 'Tomatoes', parent: '2' }
  • ];
  •  
  • export default {
  • components: {
  • DxTreeView
  • },
  • data() {
  • return {
  • plainData
  • };
  • },
  • };
  • </script>

Frequently, the id of an item is also its text. In this case, set both the keyExpr and displayExpr properties to a single value.

App.vue
  • <template>
  • <DxTreeView
  • data-structure="plain"
  • :data-source="plainData"
  • key-expr="name"
  • display-expr="name"
  • />
  • </template>
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxTreeView } from 'devextreme-vue/tree-view';
  •  
  • const plainData = [
  • { name: 'Fruits' },
  • { name: 'Apples', parentId: 'Fruits' },
  • { name: 'Oranges', parentId: 'Fruits' },
  • { name: 'Vegetables' },
  • { name: 'Cucumbers', parentId: 'Vegetables' },
  • { name: 'Tomatoes', parentId: 'Vegetables' }
  • ];
  •  
  • export default {
  • components: {
  • DxTreeView
  • },
  • data() {
  • return {
  • plainData
  • };
  • },
  • };
  • </script>

View Demo

See Also