vue 使用 vxe-list 实现虚拟列表实现虚拟树，virtual list 大数据量树列表

仰望.

已于 2022-01-26 22:19:17 修改

阅读量8.7k

点赞数 1

分类专栏： vxe-ui 文章标签： vue vxe-table vxe-list

于 2020-04-28 22:37:21 首次发布

本文链接：https://blog.csdn.net/abc26296/article/details/105826004

版权

在vue中，面对大数据量的树结构渲染，传统方式会性能低下。通过vxe-list创建虚拟列表，可以有效减少DOM渲染，提高性能。虽然每次展开、收缩需要重新更新列表，但能支持渲染大量数据，如5w条数据在200ms内完成。理论上限约为10w条，因JS运算树节点耗时会限制更大数据量的渲染。

摘要由CSDN通过智能技术生成

vxe-table vue 使用 vxe-list 实现虚拟列表实现虚拟树，virtual list 大数据量树列表

在 vue 渲染树结构是比较卡的，特别是数据大了，展开缩写都要几秒，那么解决问题的思路就是减少 dom 渲染，使用虚拟列表来模拟树结构，这个方式可以渲染大量的数据，缺点是每次点击展开、收缩都要重新更新列表，效果略差，但是支持渲染大数据量。

实现虚拟树的步骤：

基于 vxe-list 虚拟列表
拍平树结构
构建列表树结构
处理展开收缩

在这里插入图片描述

测试中：渲染 5w 条数据平均在 200ms 以内
理论上流畅渲染的数量在10w 条左右，因为数据量太大的话 js 运算树节点都会很耗时

 <vxe-list height="400" class="my-tree" :loading="loading" :data="list">
   <template v-slot="{ items }">
     <div
       class="my-tree-item"
       v-for="item in items"
       :key="item.id"
       :class="[`level-${item._LEVEL}`, {
    'has-child': item._HAS_CHILDREN, 'is-expand': item._EXPAND}]"
       :style="{paddingLeft: `${item._LEVEL * 20}px`}">
       <i class="tree-icon fa fa-chevron-right" @click="toggleTreeNode(item)"></i>
       <span class="tree-label">{
  { item.label }}</span>
     </div>
   </template>
 </vxe-list>

export default {
   
	data () {
   
		return {
   
			loading: false,
    	    list: []
		}
	},
	created () {
   
		this.loadTree(10)
	},
	methods: {
   
		getTree (size) {
   
	        // 模拟后台数据
	        const result = []
	        let idKey = 0
	        for (let index = 0; index < size; index++) {
   
	        const item = {
   
	            id: ++idKey,
	            label: `节点 ${
     index}`
	        }
	        if (index) {
   
	            if (index % 33 === 0) {
   
	            const childList = []
	            for (let cIndex = 0; cIndex < 1000; cIndex++) {
   
	                childList.push({
   
	                id: ++idKey,
	                label: `子节点