当前位置：首页 > news >正文

vue vxe-tree 树组件加载大量节点数据，虚拟滚动的用法

news 2025/7/15 6:03:48

查看官网：https://vxeui.com

上万节点数据

在这里插入图片描述

当数据量达到上万时，通过数据双向绑定将会影响性能，可以通过调用 loadData 来加载数据

<template><div><vxe-button status="primary" @click="expandAllEvent">展开所有</vxe-button><vxe-button status="primary" @click="clearAllEvent">关闭所有</vxe-button><vxe-tree ref="treeRef" v-bind="treeOptions"></vxe-tree></div>
</template><script setup>
import { ref, reactive } from 'vue'const treeRef = ref()const treeOptions = reactive({loading: false,height: 400,transform: true,showCheckbox: true,titleField: 'name'
//  默认启用  
//  virtualYConfig: {
//    enabled: true,
//    gt: 0
//  }
})const loadList = () => {treeOptions.loading = truefetch('/resource/json/provinces_list.json').then(res => res.json()).then((data) => {treeOptions.loading = falseconst $tree = treeRef.valueif ($tree) {$tree.loadData(data)}})
}const expandAllEvent = () => {const $tree = treeRef.valueif ($tree) {$tree.setAllExpandNode(true)}
}
const clearAllEvent = () => {const $tree = treeRef.valueif ($tree) {$tree.setAllExpandNode(false)}
}loadList()
</script>

连接线

在这里插入图片描述

<template><div><vxe-tree :data="treeList" transform show-checkbox show-line></vxe-tree></div>
</template><script setup>
import { ref } from 'vue'const treeList = ref([{ title: '节点2', id: '2', parentId: null },{ title: '节点3', id: '3', parentId: null },{ title: '节点3-1', id: '31', parentId: '3' },{ title: '节点3-2', id: '32', parentId: '3' },{ title: '节点3-2-1', id: '321', parentId: '32' },{ title: '节点3-2-2', id: '322', parentId: '32' },{ title: '节点3-3', id: '33', parentId: '3' },{ title: '节点3-3-1', id: '331', parentId: '33' },{ title: '节点3-3-2', id: '332', parentId: '33' },{ title: '节点3-3-3', id: '333', parentId: '33' },{ title: '节点3-4', id: '34', parentId: '3' },{ title: '节点4', id: '4', parentId: null },{ title: '节点4-1', id: '41', parentId: '4' },{ title: '节点4-1-1', id: '411', parentId: '42' },{ title: '节点4-1-2', id: '412', parentId: '42' },{ title: '节点4-2', id: '42', parentId: '4' },{ title: '节点4-3', id: '43', parentId: '4' },{ title: '节点4-3-1', id: '431', parentId: '43' },{ title: '节点4-3-2', id: '432', parentId: '43' },{ title: '节点5', id: '5', parentId: null }
])
</script>

过滤节点

通过 filter-value 就可以设置过滤功能，通过 filter-config.autoExpandAll 来设置过滤后自动展开与收起
在这里插入图片描述

<template><div><div><vxe-input v-model="treeOptions.filterValue" type="search" clearable></vxe-input></div><vxe-tree v-bind="treeOptions"></vxe-tree></div>
</template><script setup>
import { reactive } from 'vue'const treeOptions = reactive({transform: true,filterValue: '',filterConfig: {autoExpandAll: true},data: [{ title: '节点2', id: '2', parentId: null },{ title: '节点3', id: '3', parentId: null },{ title: '节点3-1', id: '31', parentId: '3' },{ title: '节点3-2', id: '32', parentId: '3' },{ title: '节点3-2-1', id: '321', parentId: '32' },{ title: '节点3-2-2', id: '322', parentId: '32' },{ title: '节点3-3', id: '33', parentId: '3' },{ title: '节点3-3-1', id: '331', parentId: '33' },{ title: '节点3-3-2', id: '332', parentId: '33' },{ title: '节点3-3-3', id: '333', parentId: '33' },{ title: '节点3-4', id: '34', parentId: '3' },{ title: '节点4', id: '4', parentId: null },{ title: '节点4-1', id: '41', parentId: '4' },{ title: '节点4-1-1', id: '411', parentId: '42' },{ title: '节点4-1-2', id: '412', parentId: '42' },{ title: '节点4-2', id: '42', parentId: '4' },{ title: '节点4-3', id: '43', parentId: '4' },{ title: '节点4-3-1', id: '431', parentId: '43' },{ title: '节点4-3-2', id: '432', parentId: '43' },{ title: '节点5', id: '5', parentId: null }]
})
</script>