vxe-table v4.8+ 与 v3.10+ 虚拟滚动支持动态行高，虚拟渲染更快了

news2024/11/6 23:31:33

Vxe UI vue vxe-table v4.8+ 与 v3.10+ 解决了老版本虚拟滚动不支持动态行高的问题，重构了虚拟渲染，渲染性能大幅提升了，行高自适应和列宽拖动都支持，大幅降低虚拟渲染过程中的滚动白屏，大量数据列表滚动更加流畅。

自适应行高

如果不需要自适应行高，可以通过 show-overflow=false 关闭自适应行高，渲染性能将更快。

在这里插入图片描述

<template>
  <div>
    <vxe-button @click="loadData(5000)">加载5k条</vxe-button>
    <vxe-button @click="loadData(10000)">加载1w条</vxe-button>
    <vxe-button @click="loadData(50000)">加载5w条</vxe-button>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { reactive, nextTick } from 'vue'
import { VxeUI } from 'vxe-table'
const imgUrlCellRender = reactive({
  name: 'VxeImage',
  props: {
    width: 36,
    height: 36
  }
})
const gridOptions = reactive({
  border: true,
  loading: false,
  height: 800,
  columnConfig: {
    resizable: true
  },
  scrollY: {
    enabled: true,
    gt: 0
  },
  columns: [
    { type: 'checkbox', width: 60 },
    { title: '列0', field: 'col0', width: 100 },
    { title: '列1', field: 'imgUrl', width: 80, cellRender: imgUrlCellRender },
    { title: '列2', field: 'col2', width: 90 },
    { title: '列3', field: 'col3', width: 200 },
    { title: '列4', field: 'col4', width: 140 },
    { title: '列5', field: 'col5', width: 300 },
    { title: '列6', field: 'col6', width: 160 },
    { title: '列7', field: 'col7', width: 120 },
    { title: '列8', field: 'col8' }
  ],
  data: []
})
// 模拟行数据
const loadData = (rowSize) => {
  gridOptions.loading = true
  setTimeout(() => {
    const dataList = []
    for (let i = 0; i < rowSize; i++) {
      const item = {
        id: 10000 + i,
        imgUrl: i % 3 === 0 ? 'https://vxeui.com/resource/img/546.gif' : 'https://vxeui.com/resource/img/673.gif'
      }
      for (let j = 0; j < 10; j++) {
        if (i % 8 === 0) {
          item[`col${j}`] = `值_${i}_${j} 内容8内容8内容8内容8`
        } else if (i % 7 === 0) {
          item[`col${j}`] = `值_${i}_${j} 内容7内容7`
        } else if (i % 6 === 0) {
          item[`col${j}`] = `值_${i}_${j} 内容6内容6内容6内容6内容6内容6内容6内容6`
        } else if (i % 5 === 0) {
          item[`col${j}`] = `值_${i}_${j} 内容5内容5内容5内容5内容5`
        } else if (i % 4 === 0) {
          item[`col${j}`] = `值_${i}_${j} 内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4内容4`
        } else {
          item[`col${j}`] = `值_${i}_${j}`
        }
      }
      dataList.push(item)
    }
    const startTime = Date.now()
    gridOptions.data = dataList
    gridOptions.loading = false
    nextTick(() => {
      VxeUI.modal.message({
        content: `加载时间 ${Date.now() - startTime} 毫秒`,
        status: 'success'
      })
    })
  }, 350)
}
loadData(200)

</script>

固定行高

在这里插入图片描述

<template>
  <div>
    <vxe-button @click="loadData(5000)">加载5k条</vxe-button>
    <vxe-button @click="loadData(10000)">加载1w条</vxe-button>
    <vxe-button @click="loadData(50000)">加载5w条</vxe-button>
    <vxe-grid v-bind="gridOptions">
      <template #action>
        <vxe-button mode="text" status="primary">按钮1</vxe-button>
        <vxe-button mode="text" status="error">按钮2</vxe-button>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive, nextTick } from 'vue'
import { VxeUI } from 'vxe-table'
const flag1CellRender = reactive({
  name: 'VxeSwitch'
})
const imgUrlCellRender = reactive({
  name: 'VxeImage',
  props: {
    width: 36,
    height: 36
  }
})
const imgList1CellRender = reactive({
  name: 'VxeUpload',
  props: {
    mode: 'image',
    readonly: true,
    moreConfig: {
      maxCount: 2
    },
    imageStyle: {
      width: 40,
      height: 40
    }
  }
})
const gridOptions = reactive({
  border: true,
  showOverflow: true,
  showHeaderOverflow: true,
  showFooterOverflow: true,
  loading: false,
  height: 800,
  columnConfig: {
    resizable: true
  },
  scrollX: {
    enabled: true,
    gt: 0
  },
  scrollY: {
    enabled: true,
    gt: 0,
    mode: 'wheel'
  },
  columns: [
    { type: 'checkbox', width: 60, fixed: 'left' },
    { title: '列0', field: 'col0', width: 100, fixed: 'left' },
    { title: '列1', field: 'imgUrl', width: 80, fixed: 'left', cellRender: imgUrlCellRender },
    { title: '列2', field: 'col2', width: 90 },
    { title: '列3', field: 'col3', width: 200 },
    { title: '列4', field: 'col4', width: 140 },
    { title: '列5', field: 'col5', width: 300 },
    { title: '列6', field: 'col6', width: 160 },
    { title: '列7', field: 'col7', width: 120 },
    { title: '列8', field: 'col8', width: 400 },
    { title: '列9', field: 'col9', width: 160 },
    { title: '列10', field: 'col10', width: 160 },
    { title: '列11', field: 'col11', width: 180 },
    { title: '列12', field: 'col12', width: 160 },
    { title: '列13', field: 'col13', width: 80 },
    { title: '列14', field: 'col14', width: 120 },
    { title: '列15', field: 'col15', width: 360 },
    { title: '列16', field: 'col16', width: 150 },
    { title: '列17', field: 'col17', width: 380 },
    { title: '列18', field: 'col18', width: 100 },
    { title: '列19', field: 'col19', width: 290 },
    { title: '列20', field: 'col20', width: 80 },
    { title: '列21', field: 'col21', width: 100 },
    { title: '列22', field: 'col22', width: 120 },
    { title: '列23', field: 'col23', width: 270 },
    { title: '列24', field: 'col24', width: 330 },
    { title: '列25', field: 'col25', width: 460 },
    { title: '列26', field: 'col26', width: 280 },
    { title: '列27', field: 'col27', width: 220 },
    { title: '列28', field: 'col28', width: 120 },
    { title: '列29', field: 'col29', width: 180 },
    { title: '列30', field: 'col30', width: 500 },
    { title: '列31', field: 'col31', width: 600 },
    { title: '列32', field: 'col32', width: 100 },
    { title: '列33', field: 'col33', width: 490 },
    { title: '列34', field: 'col34', width: 100 },
    { title: '列35', field: 'col35', width: 150 },
    { title: '列36', field: 'col36', width: 800 },
    { title: '列37', field: 'col37', width: 400 },
    { title: '列38', field: 'col38', width: 800 },
    { title: '列39', field: 'col39', width: 360 },
    { title: '列40', field: 'col40', width: 420 },
    { title: '列41', field: 'col41', width: 100 },
    { title: '列42', field: 'col42', width: 120 },
    { title: '列43', field: 'col43', width: 280 },
    { title: '列44', field: 'col44', width: 170 },
    { title: '列45', field: 'col45', width: 370 },
    { title: '列46', field: 'col46', width: 420 },
    { title: '列47', field: 'col47', width: 170 },
    { title: '列48', field: 'col48', width: 400 },
    { title: '列49', field: 'col49', width: 220 },
    { title: '列50', field: 'col50', width: 170 },
    { title: '列51', field: 'col51', width: 160 },
    { title: '列52', field: 'col52', width: 500 },
    { title: '列53', field: 'col53', width: 280 },
    { title: '列54', field: 'col54', width: 170 },
    { title: '列55', field: 'col55', width: 370 },
    { title: '列56', field: 'col56', width: 120 },
    { title: '列57', field: 'col57', width: 170 },
    { title: '列58', field: 'col58', width: 400 },
    { title: '列59', field: 'col59', width: 220 },
    { title: '列60', field: 'col60', width: 650 },
    { title: '列61', field: 'col61', width: 600 },
    { title: '列62', field: 'col62', width: 100 },
    { title: '列63', field: 'col63', width: 490 },
    { title: '列64', field: 'col64', width: 100 },
    { title: '列65', field: 'col65', width: 150 },
    { title: '列66', field: 'col66', width: 800 },
    { title: '列67', field: 'col67', width: 400 },
    { title: '列68', field: 'col68', width: 800 },
    { title: '列69', field: 'col69', width: 360 },
    { title: '列70', field: 'col70', width: 650 },
    { title: '列71', field: 'col71', width: 600 },
    { title: '列72', field: 'col72', width: 100 },
    { title: '列73', field: 'col73', width: 490 },
    { title: '列74', field: 'col74', width: 100 },
    { title: '列75', field: 'col75', width: 150 },
    { title: '列76', field: 'col76', width: 800 },
    { title: '列77', field: 'col77', width: 400 },
    { title: '列78', field: 'col78', width: 800 },
    { title: '列79', field: 'col79', width: 360 },
    { title: '列80', field: 'col80', width: 650 },
    { title: '列81', field: 'col81', width: 600 },
    { title: '列82', field: 'col82', width: 100 },
    { title: '列83', field: 'col83', width: 490 },
    { title: '列84', field: 'col84', width: 100 },
    { title: '列85', field: 'col85', width: 150 },
    { title: '列86', field: 'col86', width: 800 },
    { title: '列87', field: 'col87', width: 400 },
    { title: '列88', field: 'col88', width: 800 },
    { title: '列89', field: 'col89', width: 360 },
    { title: '列90', field: 'col90', width: 650 },
    { title: '列91', field: 'col91', width: 600 },
    { title: '列92', field: 'col92', width: 100 },
    { title: '列93', field: 'col93', width: 490 },
    { title: '列94', field: 'col94', width: 100 },
    { title: '列95', field: 'col95', width: 150 },
    { title: '列96', field: 'col96', width: 800 },
    { title: '列97', field: 'col97', width: 400 },
    { title: '列99', field: 'imgList1', width: 120, fixed: 'right', cellRender: imgList1CellRender },
    { title: '列100', field: 'flag1', width: 100, fixed: 'right', cellRender: flag1CellRender },
    { title: '操作', field: 'action', width: 140, fixed: 'right', slots: { default: 'action' } }
  ],
  data: []
})
// 模拟行数据
const loadData = (rowSize) => {
  gridOptions.loading = true
  setTimeout(() => {
    const dataList = []
    for (let i = 0; i < rowSize; i++) {
      const item = {
        id: 10000 + i,
        imgUrl: i % 3 === 0 ? 'https://vxeui.com/resource/img/546.gif' : 'https://vxeui.com/resource/img/673.gif',
        imgList1: i % 4 === 0
          ? [
              { name: 'fj577.jpg', url: 'https://vxeui.com/resource/img/fj577.jpg' }
            ]
          : [
              { name: 'fj573.jpeg', url: 'https://vxeui.com/resource/img/fj573.jpeg' },
              { name: 'fj562.png', url: 'https://vxeui.com/resource/img/fj562.png' }
            ],
        flag1: i % 5 === 0
      }
      for (let j = 0; j < 120; j++) {
        item[`col${j}`] = `值_${i}_${j}`
      }
      dataList.push(item)
    }
    const startTime = Date.now()
    gridOptions.data = dataList
    gridOptions.loading = false
    nextTick(() => {
      VxeUI.modal.message({
        content: `加载时间 ${Date.now() - startTime} 毫秒`,
        status: 'success'
      })
    })
  }, 100)
}
loadData(200)

</script>

在这里插入图片描述

github https://github.com/x-extends/vxe-table
gitee

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2229822.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

关于武汉芯景科技有限公司的马达驱动芯片AT6237开发指南（兼容DRV8837)

关于武汉芯景科技有限公司的马达驱动芯片AT6237开发指南（兼容DRV8837)

一、芯片引脚介绍 1.芯片引脚 二、系统结构图 三、功能描述 逻辑功能
阅读更多...
青出于“蓝”的合资第一新能源，“换壳”背后有门道

青出于“蓝”的合资第一新能源，“换壳”背后有门道

文/王俣祺 导语&#xff1a;千呼万唤始出来的新能源“马6”终于亮相了&#xff0c;这款马自达EZ-6本以为凭借马自达多年来在国内市场深耕的底蕴可以收获一片支持&#xff0c;但最近却深陷“换壳”风波。那么今天我们就一起看看&#xff0c;这款马自达EZ-6和被冠以“原型”的深蓝…
阅读更多...
Github上的十大RAG(信息检索增强生成)框架

Github上的十大RAG(信息检索增强生成)框架

信息检索增强生成(Retrieval-Augmented Generation,简称RAG)是一种强大的技术,能够显著提升大型语言模型的性能。RAG框架巧妙地结合了基于检索的系统和生成模型的优势,可以生成更加准确、符合上下文、实时更新的响应。随着对先进人工智能解决方案需求的不断增长,GitHub上涌现出…
阅读更多...
【小白学机器学习28】 统计学脉络+ 总体+ 随机抽样方法

【小白学机器学习28】 统计学脉络+ 总体+ 随机抽样方法

目录 参考书&#xff0c;学习书 0 统计学知识大致脉络 1 个体---抽样---整体 1.1 关于个体---抽样---整体&#xff0c;这个三段式关系 1.2 要明白&#xff0c;自然界的整体/母体是不可能被全部认识的 1.2.1 不要较真&#xff0c;如果是人为定义的一个整体&#xff0c;是可…
阅读更多...
5、片元着色器之基础光照模型：Phong模型和Blinn-Phong模型

5、片元着色器之基础光照模型：Phong模型和Blinn-Phong模型

1、什么是Phong光照模型&#xff1f; Phong模型就是在兰伯特模型的基础上增加了镜面反射光的计算。具体来说&#xff0c;兰伯特模型只考虑漫反射光&#xff0c;而Phong模型在此基础上引入了镜面反射光的概念&#xff0c;以模拟光线在光滑表面反射时产生的高光效果。镜面反射光的…
阅读更多...
Ubuntu使用Qt虚拟键盘，支持中英文切换

Ubuntu使用Qt虚拟键盘，支持中英文切换

前言 ​ 最近领导给了个需求&#xff0c;希望将web嵌入到客户端里面&#xff0c;做一个客户端外壳&#xff0c;可以控制程序的启动、停止、重启&#xff0c;并且可以调出键盘在触摸屏上使用(我们的程序虽然是BS架构&#xff0c;但程序还是运行在本地工控机上的)&#xff0c;我…
阅读更多...
ES（ElaticSearch）详解（含工作原理、基本知识、常见问题和优化方法）

ES（ElaticSearch）详解（含工作原理、基本知识、常见问题和优化方法）

文章目录 一、Lucene 和 ELK 的组成二、ES 配置文件参数解读三、ES 基本知识1、索引&#xff08;Index&#xff09;&#xff1a;类似于关系型数据库的工作表2、类型&#xff08;Type&#xff09;&#xff1a;废弃3、文档&#xff08;Document&#xff09;&#xff1a;类似于关系…
阅读更多...
巨好看的登录注册界面源码

巨好看的登录注册界面源码

展示效果 源码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta http-equiv"X-UA-Compatible" content"IEedge" /><meta name"viewport" content"widthdevic…
阅读更多...
记一次：使用使用Dbeaver连接Clickhouse

记一次：使用使用Dbeaver连接Clickhouse

前言&#xff1a;使用了navicat连接了clickhouse我感觉不太好用&#xff0c;就整理了一下dbeaver连接 0、使用Navicat连接clickhouse 测试连接 但是不能双击打开&#xff0c;可是使用命令页界面&#xff0c;右键命令页界面&#xff0c;然后可以用sql去测试 但是不太好用&#…
阅读更多...
ts：使用fs内置模块简单读写文件

ts：使用fs内置模块简单读写文件

ts&#xff1a;使用fs内置模块简单读写文件 一、主要内容说明二、例子&#xff08;一&#xff09;、fs模块的文件读写1.源码1 &#xff08;fs模块的文件读写&#xff09;2.源码1运行效果 三、结语四、定位日期 一、主要内容说明 在ts中&#xff0c;我们可以使用内置的fs模块来…
阅读更多...
RFID技术让档案管理更高效、更可靠

RFID技术让档案管理更高效、更可靠

RFID档案应用&#xff0c;即利用射频识别技术对档案进行管理&#xff0c;其价值主要体现在以下几个方面&#xff1a; PART01效率提升 RFID技术通过无线射频识别&#xff0c;能够快速、准确地识别档案信息&#xff0c;大大提高了档案管理的效率。在传统的档案管理中&#xff0c;…
阅读更多...
《数字图像处理基础》学习04-图像的量化

《数字图像处理基础》学习04-图像的量化

在上一篇文章中&#xff0c;已经实现了对图像的采样。 《数字图像处理基础》学习03-图像的采样-CSDN博客 接着就需要对图像进行量化操作。 目录 一&#xff0c;量化的相关概念 二&#xff0c;matlab编写程序生成量化图像 1&#xff0c;要求 2&#xff0c;思路及注意点…
阅读更多...
逻辑代数的基本公式

逻辑代数的基本公式

根据图中的逻辑运算符号&#xff0c;包括与非逻辑&#xff08;NAND&#xff09;、或非逻辑&#xff08;NOR&#xff09;、与或非逻辑、异或逻辑&#xff08;XOR&#xff09;和同或逻辑&#xff08;XNOR&#xff09;&#xff0c;我们可以分别给出每个运算符的真值表。 1. 与非逻…
阅读更多...
iptables面试题

iptables面试题

1、详述iptales工作流程以及规则过滤顺序&#xff1f; iptables过滤的规则顺序是由上至下&#xff0c;若出现相同的匹配规则则遵循由上至下的顺序 2、iptables的几个表以及每个表对应链的作用&#xff1f; Iptables有四表五链 Filter表 : Filter表是iptables中使用的默认表…
阅读更多...
Java Collection/Executor DelayedWorkQueue 总结

Java Collection/Executor DelayedWorkQueue 总结

前言 相关系列 《Java & Collection & 目录》《Java & Executor & 目录》《Java & Collection/Executor & DelayedWorkQueue & 源码》《Java & Collection/Executor & DelayedWorkQueue & 总结》《Java & Collection/Executor &a…
阅读更多...
[Python学习日记-59] 开发基础练习2——网站访问日志分析

[Python学习日记-59] 开发基础练习2——网站访问日志分析

[Python学习日记-59] 开发基础练习2——网站访问日志分析 简介 题目 答案 简介 该练习结合了函数和一些常用的模块开发了一个对网站访问日志分析的程序&#xff0c;可以巩固实践之前学习的内容。 题目 基本需求&#xff1a; 统计本日志文件的总 pv、uv 数列出全天每小时的…
阅读更多...
tiktok批量添加达人怎么弄

tiktok批量添加达人怎么弄

在 TikTok 上批量添加达人可以借助一些工具或方法&#xff0c;以下是一些常见的途径&#xff1a; 点我达秘免费体验地址注册 使用达人邀约工具&#xff1a; 功能特点&#xff1a;这类工具专为 TikTok 跨境小店和本土小店提供服务&#xff0c;可以实现多国家、多店铺同时私信和…
阅读更多...
深度学习-激活函数详解

深度学习-激活函数详解

激活函数在神经网络中的作用是引入非线性特征&#xff0c;使得网络可以拟合和表达更复杂的数据关系。它通过对输入进行非线性变换&#xff0c;让每一层的输出既能反映输入特征&#xff0c;又能传递重要信息&#xff0c;以进行梯度更新。以下是关于常用激活函数的详细讲解。 1.…
阅读更多...
基于vue框架的的乐守护儿童成长记录系统b65tg（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

基于vue框架的的乐守护儿童成长记录系统b65tg（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,成长指标,疫苗接种,学业档案,课外活动,旅游经历,交流论坛 开题报告内容 基于Vue框架的乐守护儿童成长记录系统开题报告 一、研究背景与意义 随着科技的飞速发展和家庭对子女成长关注度的不断提升&#xff0c;如何科学、系统地记…
阅读更多...
使用wordcloud与jieba库制作词云图

使用wordcloud与jieba库制作词云图

目录 一、WordCloud库 例子&#xff1a; 结果&#xff1a; 二、Jieba库 两个基本方法 jieba.cut() jieba.cut_for_serch() 关键字提取&#xff1a; jieba.analyse包 extract_tags() 一、WordCloud库 词云图&#xff0c;以视觉效果提现关键词&#xff0c;可以过滤文本…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023