vue项目中使用了element-ui的el-tree树节点对数据进行了渲染，奈何数据量太大导致页面卡死或需要3s以上才可渲染出来。为了解决以上问题，查询资料对问题进行了解决，对此进行整理。希望可以帮到你。
选用 vue-easy-tree ，这个组件兼容 element-ui 中 el-tree 的方法，在使用虚拟滚动时，也可继续使用 el-tree 的方法。
npm install @wchbrad/vue-easy-tree或
yarn add @wchbrad/vue-easy-tree<template>
<div class="ve-tree" style="height:calc(100vh - 20px)">
<!-- 不使用虚拟滚动时只需去掉height参数即可 -->
<vue-easy-tree
ref="veTree"
node-key="id"
show-checkbox
height="calc(100vh - 20px)"
:data="treeData"
:props="props"
></vue-easy-tree>
</div>
</template>
<script>
import VueEasyTree from "@wchbrad/vue-easy-tree";
export default {
data() {
return {
props: {
label: "name",
children: "children"
},
treeData: []
};
},
components: {
VueEasyTree
},
created() {
const data = [],
root = 8,
children = 3,
base = 1000;
for (let i = 0; i < root; i++) {
data.push({
id: `${i}`,
name: `test-${i}`,
children: []
});
for (let j = 0; j < children; j++) {
data[i].children.push({
id: `${i}-${j}`,
name: `test-${i}-${j}`,
children: []
});
for (let k = 0; k < base; k++) {
data[i].children[j].children.push({
id: `${i}-${j}-${k}`,
name: `test-${i}-${j}-${k}`
});
}
}
}
this.treeData = data;
}
};
</script>
在对树形结构进行自定义的时候会发现，高度其实是固定的。路径 node_modules\@wchbrad\vue-easy-tree\src\components\ve-tree.vue ，在下面标注的2处地方修改你需要的高度 。
<RecycleScroller
v-if="height && !isEmpty"
:style="{
height: height,
'overflow-y': 'auto',
'scroll-behavior': 'smooth'
}"
key-field="key"
:items="dataList"
:item-size="66" // <- 这里
:buffer="50"
v-slot="{ active,item }"
>
<ElTreeVirtualNode
v-if="active"
style="height: 66px;" // <- 这里
:node="item"
:renderContent="renderContent"
:showCheckbox="showCheckbox"
:render-after-expand="renderAfterExpand"
@node-expand="handleNodeExpand"
/>
</RecycleScroller>（声明：本人前端小白，发文章只为记录自己学习过程，如果文中有什么错误欢迎大家指出。）
如果觉得这篇文章帮助了你，关注、点赞或者打赏一下都是可以的(*^▽^*)
本文参考 vue 实现 tree 树形大量数据的多功能虚拟滚动-Virtual Tree
对作者表示感谢！
在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网，点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows，点击立即下载。3.下载完成，文件大小615MB，如下图：4.鼠标右击，以管理员身份运行。5.点击下一步6.勾选条款，点击下一步7.先勾选，再点击下一步8.去掉勾选，点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证，复制填入，然后点击输入即可，亲测有效。13.点击完成14.重启系统，点击是15.双击VMwareWorkstationPro图标，进入虚拟机主
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
需求：要创建虚拟机，就需要给他提供一个虚拟的磁盘，我们就在/opt目录下创建一个10G大小的raw格式的虚拟磁盘CentOS-7-x86_64.raw命令格式：qemu-imgcreate-f磁盘格式磁盘名称磁盘大小qemu-imgcreate-f磁盘格式-o?1.创建磁盘qemu-imgcreate-fraw/opt/CentOS-7-x86_64.raw10G执行效果#ls/opt/CentOS-7-x86_64.raw2.安装虚拟机使用virt-install命令，基于我们提供的系统镜像和虚拟磁盘来创建一个虚拟机，另外在创建虚拟机之前，提前打开vnc客户端，在创建虚拟机的时候，通过vnc
参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍 介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。 内容有： ①：Hub模型的方法介绍 ②：服务器端代码介绍 ③：前端vue3安装并调用后端方法 ④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke() 去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on
我这个模型:classBunny每当我提交一个表单来创建这个模型时，我都会收到以下错误:#的未定义方法“number_before_type_cast” 最佳答案 我通过将此方法添加到我的Bunny模型中解决了这个问题:defnumber_before_type_castnumberend我不喜欢它，但我想在有人发布更好的解决方案之前它会起作用。 关于ruby-on-rails-Rails验证虚拟属性，我们在StackOverflow上找到一个类似的问题： h
我有一个中等复杂度的Rails应用程序。主Controller(执行应用程序所要做的事情的Controller)只有一个操作方法。(它不是标准的RESTful应用程序；它充当中介，并且对其调用方式有外部限制。)但是，它确实有很多方法和一些过滤器，以及一个不断增长的测试套件。随着时间的推移，结构发生了很大变化，我不再相信为之前编写的测试设置的某些Mocha期望仍然合适。有多个人在开发该应用程序，因此我正在构建一本用于编写功能测试的指南。“当你想在有/没有[那些]副作用的情况下进行测试时，使用[这些]期望和断言”等等。调用树/图在编写此类文档时非常有用。除了过滤器之外，这些甚至可以静态地从
【适用平台】私有云 说明：完成私有云部分是需要两台虚拟机的，分别为controller、compute两个节点，但我们只需配置一台，然后克隆就方便多啦！需要用到的映射文件：关于vm的安装我就不介绍的，毕竟挺简单的，下面让我们看看基于私有云模块中，虚拟机的搭建吧。1、创建新的虚拟机，这里一般我会选择自定义，毕竟后面的配置都要根据私有云相关来进行搭建，会比较复杂。（如果是基础的可以选择典型，典型的满足一般虚拟机的配置） 2、选择稍后安装操作系统会比较方便后续的选择，这里你也可以自己选择自己的映像文件（但不建议） 3、我们是基于Linux下操作的，所以选择Linux客户机操作系统，版本选择自己
平时开发中我们经常会遇到这样的需求，在一个不限高度的盒子中会有很多内容，如果全部显示用户体验会非常不好，所以可以先折叠起来，当内容达到一定高度时，显示展开更多按钮，点击即可显示全部内容，先来看看效果图： 这样做用户体验瞬间得到提升，接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计，这里就不贴了，主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否
我了解到，在生产模式下预编译Assets期间，如果我们不明确需要任何其他特定来源的文件，Rails只会默认从“app/assets”获取Assets像“vendor/assets”和“lib/assets”。我有一个问题:Willrequire_tree.loadassetsfrom'vendor/assets'and'lib/assets'? 最佳答案 不，require_tree.只会加载本地目录中的Assets，因此require_tree之后的点仅指定应用程序Assets文件所在的目录。如果你想在vendor/assets和
VMware虚拟机与本地主机进行磁盘共享前提虚拟机版本为Windows10（专业版，不是可能有问题）本地主机为家庭版或学生版(此版本会有问题，但有替代方式)最好是专业版VMware操作1.关闭防火墙，全部关闭。2.打开电脑属性3.点击共享-》高级共享-》权限4.如果没有everyone，就添加权限选择完全控制，然后应用确定。5.打开cmd输入lusrmgr.msc(只有专业版可以打开)如果不是专业版，可以跳过这一步。点击用户-》administrator密码要复杂密码，否则不行。推荐admaiN@1234类型的密码。设置完密码，点击属性，将禁用解开。6.如果虚拟机的windows不是专业版，可