DevExtreme Vue - Overview
The TreeView widget is a tree-like representation of textual data.
The following code adds a simple TreeView to your page:
App.vue
- <template>
- <DxTreeView
- :items="hierarchicalData"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const hierarchicalData = [{
- id: '1',
- text: 'Fruits',
- expanded: true,
- items: [
- { id: '1_1', text: 'Apples' },
- { id: '1_2', text: 'Oranges' }
- ]
- }, {
- id: '2',
- text: 'Vegetables',
- expanded: true,
- items: [
- { id: '2_1', text: 'Cucumbers' },
- { id: '2_2', text: 'Tomatoes' }
- ]
- }];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- hierarchicalData
- };
- },
- };
- </script>
Note that the data source in the code above has a hierarchical structure, however, it also supports data sources with a plain structure. See the Use Hierarchical Data and Use Plain Data articles to learn how you can customize hierarchical and plain data sources.
See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- TreeView - Access a Node
- TreeView - Search Nodes
- TreeView - Expand and Collapse Nodes
- TreeView - Select Nodes
- TreeView - Customize Node Appearance
- TreeView - Enhance Performance on Large Datasets
- TreeView - Keyboard Support
- TreeView API Reference
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.