告别卡顿！vue 复杂的的高性能表格哪家强，以项目中使用过的 ag-grid 和 vxe-table 来评测

告别卡顿！vue 复杂的的高性能表格哪家强，以项目中使用过的 ag-grid 和 vxe-table 来评测。在企业级表格中，适用于 vue 框架的 2 个优秀表格 AgGrid 和 VxeTable 比较具备代表性，一个是原生 js 组件，一个是纯血 vue 生态组件。

前言

• 当项目中加载的数据比较少时，那么选择任意一个表格都是没问题的，在 vue 中不管是主流的 element plus 还是 antd vue 的自带的 table组件都基本够用。当时当涉及加载大大量数据的表格列表时，就会出现非常大的卡顿，比如加载1000行甚至10000行数据时，如果表格稍微带点负责功能，比如冻结列/样式等，大量的Dom元素，cpu直接100%，就会非常卡顿，甚至页面都卡死。
• 这时我们就可选择 ag-grid（功能强大，体积大，大数据加载非常流畅，社区版功能少部免费和企业版收费），vxe-table（功能非常强大，体积中等，大数据加载流畅，开源版功能多免费和企业版收费）

vxe-table 来写一个简单使用例子

vxe-table 静态标签式 的使用

<template>
  <vxe-table height="500" :data="tableData">
    <vxe-column type="seq" width="70"></vxe-column>
    <vxe-column field="name" title="Name"></vxe-column>
    <vxe-column field="role" title="Role"></vxe-column>
    <vxe-column field="sex" title="Sex"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
    <vxe-column field="address" title="Address"></vxe-column>
  </vxe-table>
</template>

<script setup>
import { ref } from 'vue'

const tableData = ref([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
  { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
])
</script>

vxe-table 动态配置式 vxe-grid 的使用

<template>
  <vxe-grid v-bind="gridOptions"></vxe-grid>
</template>

<script setup>
import { reactive } from 'vue'

const gridOptions = reactive({
	height: 500,
  columns: [
		{ type: 'seq', width: 70 },
		{ field: 'name', title: 'Name' },
		{ field: 'sex', title: 'Sex' },
		{ field: 'age', title: 'Age' },
		{ field: 'address', title: 'Address', showOverflow: true }
  ],
  data: [
		{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
		{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
		{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
		{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
	]
})
</script>

ag-grid 来写一个简单使用例子

ag-grid 的用，需安装 npm install ag-grid-vue3用于在 vue 中使用

<template>
   <ag-grid-vue
       :rowData="rowData"
       :columnDefs="colDefs"
       style="height: 500px"
   >
   </ag-grid-vue>
</template>

<script setup>
import { ref } from 'vue'
import { AgGridVue } from "ag-grid-vue3"
const rowData = ref([
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
])

const colDefs = ref([
    { field: "make" },
    { field: "model" },
    { field: "price" },
    { field: "electric" }
])
</script>

那么应该怎么选项呢

ag-grid https://www.ag-grid.com
vxe-table https://vxetable.cn

• 如何只是基本大数据表格列表，不需要树表格，分组等，那么 ag-grid 社区版够用，免费。
• 如果需要大数据列表表格。树表格/同时还要各种分组，打印，导出等复杂功能，那么 vxe-table 是不二选择，开源版免费。

特性	vxe-table	ag-grid
定位	（国内项目）vue2/vue3 生态企业级表格解决方案	（国外项目）原生js企业版表格解决方案
大数据量加载	强	极强
复杂功能	极强（排序，展开行，树，个性化列，拖拽，合并，分组，分页，表单，工具栏，可编辑，数据校验，无限滚动，渲染器，导入导出打印）	强（排序，展开行，树，拖拽，合并，分组，分页，可编辑，导入导出打印）
Excel 功能	单元格选择（单区域，多区域，复制粘贴，查找替换，按键导航，支持集成第三方echarts图表）	单元格选择（单区域，多区域，复制粘贴，按键导航，图表）
甘特图	支持，扩展库 vxe-gantt（子任务，拖拽，里程碑，依赖线）	不支持
官网文档	非常详细，全中文文档，各种示例都有，文档成熟度最高	全英文文档，文档示例非常少，文档阅读难度非常高
上手难度	简单，API丰富	难，API丰富
体积	中等	较大
生态	任意vue组件都能直接使用	由于原生js的，vue组件需再次封装，比较麻烦

2个都是支持秒级渲染万级数据的表格，各有各的优缺点，可以根据不同场景选择。

总结：

• 如果是vue项目，首选 vxe-table
• 如果是需要多框架使用，选原生的 ag-grid