使用Naive UI 的datatable组件数据量大时加载慢的解决办法

最新推荐文章于 2024-07-02 16:26:35 发布
最新推荐文章于 2024-07-02 16:26:35 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： vue3 文章标签： datatable 虚拟滚动 大数据量 性能优化 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45743541/article/details/125540276
版权
  • 使用datatable组件，根据需求数据不做分页，发现上万条数据页面加载很慢，要十几秒。
  • 不需要写什么懒加载，监听滚动条高度啥的
  • 解决办法：加一个:virtual-scroll=“true”
  • 在这里插入图片描述
    在这里插入图片描述
宝山江疏影
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于Vue3+TS, 使用Naive UI组件库开发的后台管理系统.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
NaiveUI前端UI框架，UI组件库的js文件资源下载
08-29
9. **无障碍性**：NaiveUI在设计组件时考虑到了无障碍性（Accessibility，简称a11y），确保残障人士也能顺利使用，符合WCAG标准。 10. **跨平台兼容**：NaiveUI的组件在不同的浏览器和设备上表现稳定，适应各种屏幕...
vue3+Naive UI数据表格基本使用方式
weixin_54570626的博客
03-08 8726
vue3+Naive UI数据表格基本使用方式：根据数据显示不同类容及内容样式
Datatables结合struts2+spring+mybatis实现服务器分页，解决大数据量加载缓慢
阿狸写代码
09-21 252
更多datatables在http://dt.thxopen.com/ 欢迎大家来做客 在项目中用到datatables比较多，但是当datatables加载超过1000多的时候就会出现有点缓慢的的样子，这个时候如果继续增加数据量让datatables去处理，那会是一个让人抓狂的事情，幸好datatables也提供了大数据量的解决办法，下面我结合我的项目，来讲讲怎么用datatables加载大...
vue3,UI框架NaiveUI 数据表格
最新发布
u011233151的博客
07-02 478
vue3,UI框架NaiveUI 数据表格
mysql填datatable慢,DataTable中加载很慢
weixin_42302418的博客
01-21 298
I'm using a datatable as the datasource of some dropdowns on a page, but have noticed that the page is very slow during the postbacks.I've tracked it through to here:DataTable dt = new DataTable();dt....
cdatatable大数据操作_datatable处理大数据耗时太久了
weixin_35158450的博客
12-24 236
1500条数据左右平均需要七八秒$.ajax({url: NodejsUrls + "data/query",type: "post",data: {req: str},success: function(data, textStatus) {var data_arr = data.data;if (tabTable1 != null) {tabTable1.fnDestroy();tabTabl...
在datatable中加载easyui控件时,draw操作很慢的解决方案
d380025303的博客
03-28 395
要用datatable完成下图这种需求其中最后的表格都需要初始化easyUI的combobox ,datebox ,numberbox等发现做出来之后在每页表格数据超过5-6条之后在draw的时候异常慢 ,(比如做删除之后draw)原因是每次draw的时候 ,都需要重新加载一次easyUI的控件 ,在表格中控件数量过多 ,会使时间大大增加现在提供一种解决方案 : 即加载的时候不初始化控件 ,只有在...
初试 对于数据量过大时，datetables的后台分页
qq1317857468的博客
01-21 306
前端js: ​​​​​​​var t=$('#basic-datatables').DataTable({ 'language': { 'emptyTable': '没有数据', 'loadingRecords': '加载中...', 'processing': '...
基于Vue3, 使用Naive UI组件库开发的后台管理系统.zip
05-26
6. **Naive UI组件**：项目中广泛使用了Naive UI提供的组件，例如在各个页面的模板中可以看到`<n-button>`、`<n-table>`、`<n-form>`等，这些组件简化了界面开发，提高了开发效率。 7. **API调用**：后端接口通常...
基于 Naive UI 的轻量级后台管理模板.zip
12-14
《基于Naive UI的轻量级后台管理模板详解》 在现代Web开发中，构建高效、易用且美观的后台管理系统已经成为开发者的重要任务之一。Naive UI作为一个新兴的前端组件库，以其简洁的设计、丰富的功能和优秀的性能，...
基于 Naive UI 的轻量级后台管理模板源码.zip
11-29
【标题】"基于 Naive UI 的轻量级后台管理模板源码"是一个使用Naive UI框架构建的简单、高效的后台管理系统界面模板。Naive UI 是一个由 Vue.js 驱动的组件库，专为现代 Web 应用设计，提供了一系列可复用且易于定制...
基于 Ant Design 和 Vue 3 的企业级 UI 组件
05-01
基于 Ant Design 和 Vue 3 的企业级 UI 组件。提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 Vue 组件。共享 Ant Design of React 设计工具体系。支持环境。现代浏览器。1.x 版本支持 IE 9+（需要 ...
Lumen IM 是一个网页版在线聊天项目前端使用 Naive UI + Vue3后端采用 GO 开发
04-14
该项目的前端采用了 Naive UI 和 Vue3 技术，确保了界面友好性和流畅性。而后端则是采用 GO 语言开发，为系统提供稳定高效的支持。该项目支持多种聊天消息类型，包括文本消息、代码块、群投票、图片以及其他类型文件...
Lumen IM 是一个网页版在线聊天项目，前端使用 Naive UI + Vue3，后端采用 GO 开发 .zip
04-03
1. **Naive UI**: Naive UI 是一款基于 Vue 3 的组件库，提供了丰富的UI元素和组件，如按钮、表单、布局、通知等，使得开发者可以快速构建出美观且响应式的用户界面。它的设计理念是简洁、实用，易于定制和扩展，这...
基于 FastAPI+Vue3+Naive UI 的现代化轻量管理平台.zip
04-03
本项目名为“基于 FastAPI+Vue3+Naive UI 的现代化轻量管理平台”，它整合了三个强大的技术栈，旨在提供一个快速、灵活且易于维护的解决方案。下面将详细阐述这三个核心技术及其在项目中的应用。 1. **FastAPI**： ...
Naive UI 文档特别慢 本地存了个离线文档 2.34.3
飘逸者打瞌睡
02-15 632
文件地址 https://gitee.com/piaoyizhe666666/naive-ui-document。
naive-ui低版本浏览器兼容问题n-data-table-＞scrollbar不适应父元素的高
HaHaTogether的博客
03-02 527
可以看到组件库封装scrollbar的时候，给了子组件(当前元素:last-child)一个flex-grow：1。在低版本浏览器部署项目的时候，naive-ui组件库data-table组件内容区域不能滚动。所以给当前元素一个display: flex;解决，要修改子组件高度继承，所以要更改父组件的direction。2. 继续看子元素，没有继承父组件的高度。
Naive UI - Table
weixin_42112342的博客
03-02 323
Naive UI 表格
naive ui 的组件字体大小如何设置
04-27
Naive UI的组件字体大小可以通过设置全局样式来进行设置。具体方法是在应用程序的入口处使用createApp函数创建应用实例时，调用use函数，将全局样式注册到应用中。以下是一个简单的示例代码： ``` import NaiveUI from 'naive-ui' import { createApp } from 'vue' const app = createApp(App) app.use(NaiveUI, { size: 'medium', // 设置组件大小为medium globalTheme: { components: { NButton: { style: { fontSize: '16px' // 设置NButton组件字体大小为16px } }, // 其他组件样式设置 } } }) app.mount('#app') ``` 在全局样式中，设置组件的字体大小应该在相应组件的样式中进行设置，如上述代码中的NButton样式设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宝山江疏影

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值