居于ant-design-vue封装的虚拟列表组件av-table

居于ant-design-vue封装的虚拟列表组件av-table

av-table亮点

  • 开箱即用,不破坏antd原有a-table的所有属性和方法,不破坏布局
  • 能加载10W级别以上的数据而不卡顿
  • 最重要的是,可以无缝移植到原有的居于ant-design-vue(3.2.20版本)项目中

原理

  • 简单说一下原理吧,请看下图:

源码地址

源码地址点这里

npm包下载地址

av-table在线演示地址

简介

  • 用ant-design-vue的用户可能会遇到过一些性能上的烦恼:当页面中表格数据量达到一定量级的时候,滚动页面会变得非常卡顿。由于开发过程中疏忽了卡顿问题,等到项目进度已经100%的时候再回头去优化,发现如果要替换掉项目中原有的a-table代码改动量大,时间成本特别高,还存在一定的未知风险。未来解决这个烦恼,本人稍微改动了一下a-table,使其加载10w条数据也不会出现卡顿。所以,av-table就出现了。
  • av-table是居于ant-design-vue(版本3.2.20) 的 a-table组件封装的虚拟列表组件。 av-table组件继承了a-table的所有属性和方法,用户在使用的时候可以直接参照a-table的api文档进行开发, 当然该虚拟列表组件新增了两个a-table没有的关键属性,需要使用者特别注意的,具体属性会在下面注明。
  • 使用前一定要安装ant-design-vue(版本3.2.20)依赖
  • 使用过程中,可能要传一下table的scroll.y,其中av-table的scroll参数与a-table的scroll参数一致 ( 原 ant-design-vue a-table 组件 API 传送地址点这里

额外新增两个参数如下:

参数 说明 类型 默认值 是否必填
virtualized 是否开启虚拟列表功能 boole false
itemHeight 行高设置,当传入该值时,虚拟列表会优先根据该行高进行计算,当用户不传该值时,会根据 size 值选择行高,分别对应关系为:default = 55, middle = 47 small = 39 number 0

av-table使用示例代码

main.ts代码如下

ts 复制代码
import { createApp } from "vue";
//记得引入antd.css,否则会样式丢失
import "ant-design-vue/dist/antd.css";
import App from "./App.vue";
import AVTable from "av-table";

createApp(App).use(AVTable).mount("#app");

App.vue代码如下

ts 复制代码
<template>
  <div id="app">
    <AVTable
      :dataSource="dataSource"
      :virtualized="true"
      :columns="columns"
      :scroll="{ y: '400px' }"
      :pagination="false"
    ></AVTable>
  </div>
</template>

<script setup>
const dataSource = Array.from(
  Array(1000).fill({
    key: "1",
    name: "蒋哥哥",
    age: 18,
    address: "东莞xxxX电子厂",
    tag: "宇宙无敌帅气",
  }),
  (item, index) => ({ ...item, name: `${item.name}${index}`, key: index })
);

const columns = [
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
  },
  {
    title: "年龄",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "特征",
    dataIndex: "tag",
    key: "tag",
  },
  {
    title: "工作单位",
    dataIndex: "address",
    key: "address",
  },
];
</script>

<style scoped>
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
}
#app {
  height: 100%;
}
</style>
相关推荐
excel4 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着4 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_8 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark8 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23338 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts