vxe-table替代el-table,el-table卡顿,el-table卡死

我爱模板网在做一个基于vue3+element-plus的项目时，数据高达四五十万，在使用el-table展示数据时，客户要求分页大小改成100、500、1000、2000、5000、10000的切换模式，当分页达到2000时，el-table渲染要花上四五秒，达到5000基本上就会经常卡死。

百度了一番，返现vxe-table貌似口碑不错，最大支持渲染五万列，三十万行，也不怎么卡顿，立马换上，发现还真不错。

它在渲染大数据时，采用的是虚拟渲染，只渲染视窗内的内容，而且，它的很多api，如sort、filter等与el-table几乎差不多。使用起来非常方便。如下图，进五十万的数据，渲染了2000行：

1、安装

npm install xe-utils vxe-table@next

2、在main.js中引用

import { App, createApp } = 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
function useTable (app: App) {
app.use(VXETable)
// 给 vue 实例挂载内部对象，例如：
// app.config.globalProperties.$XModal = VXETable.modal
// app.config.globalProperties.$XPrint = VXETable.print
// app.config.globalProperties.$XSaveFile = VXETable.saveFile
// app.config.globalProperties.$XReadFile = VXETable.readFile
}
createApp(App).use(useTable).mount('#app')

全局参数：

 import VXETable from 'vxe-table'
VXETable.setup({
// size: null, // 全局尺寸
// zIndex: 999, // 全局 zIndex 起始值，如果项目的的 z-index 样式值过大时就需要跟随设置更大，避免被遮挡
// version: 0, // 版本号，对于某些带数据缓存的功能有用到，上升版本号可以用于重置数据
// table: {
//   showHeader: true,
//   keepSource: false,
//   showOverflow: null,
//   showHeaderOverflow: null,
//   showFooterOverflow: null,
//   size: null,
//   autoResize: false,
//   stripe: false,
//   border: false,
//   round: false,
//   emptyText: '暂无数据',
//   rowConfig: {
//     keyField: '_X_ROW_KEY' // 行数据的唯一主键字段名
//   },
//   radioConfig: {
//     trigger: 'default'
//   },
//   checkboxConfig: {
//     strict: false,
//     highlight: false,
//     range: false,
//     trigger: 'default'
//   },
//   sortConfig: {
//     remote: false,
//     trigger: 'default',
//     orders: ['asc', 'desc', null],
//     sortMethod: null
//   },
//   filterConfig: {
//     remote: false,
//     filterMethod: null
//   },
//   expandConfig: {
//     trigger: 'default',
//     showIcon: true
//   },
//   treeConfig: {
//     rowField: 'id',
//     parentField: 'parentId',
//     children: 'children',
//     hasChild: 'hasChild',
//     mapChildren: '_X_ROW_CHILD',
//     indent: 20,
//     showIcon: true
//   },
//   tooltipConfig: {
//     enterable: true
//   },
//   menuConfig: {
//     visibleMethod () {}
//   },
//   editConfig: {
//     mode: 'cell',
//     showAsterisk: true
//   },
//   importConfig: {
//     modes: ['insert', 'covering']
//   },
//   exportConfig: {
//     modes: ['current', 'selected']
//   },
//   customConfig: {
//    storage: false
//   },
//   scrollX: {
//     gt: 60
//   },
//   scrollY: {
//     gt: 100
//   }
// },
// grid: {
//   size: null,
//   zoomConfig: {
//     escRestore: true
//   },
//   pagerConfig: {
//     perfect: false
//   },
//   toolbarConfig: {
//     perfect: false
//   },
//   proxyConfig: {
//     autoLoad: true,
//     message: true,
//     props: {
//       list: null, // 用于列表，读取响应数据
//       result: 'result', // 用于分页，读取响应数据
//       total: 'page.total' // 用于分页，读取总条数
//     }
//     beforeItem: null,
//     beforeColumn: null,
//     beforeQuery: null,
//     afterQuery: null,
//     beforeDelete: null,
//     afterDelete: null,
//     beforeSave: null,
//     afterSave: null
//   }
// },
// pager: {
//   size: null,
//   autoHidden: false,
//   perfect: true,
//   pageSize: 10,
//   pagerCount: 7,
//   pageSizes: [10, 15, 20, 50, 100],
//   layouts: ['PrevJump', 'PrevPage', 'Jump', 'PageCount', 'NextPage', 'NextJump', 'Sizes', 'Total']
// },
// form: {
//   preventSubmit: false
//   size: null,
//   colon: false,
//   validConfig: {
//     autoPos: true
//   },
//   tooltipConfig: {
//     enterable: true
//   },
//   titleAsterisk: true
// },
// input: {
//   size: null,
//   transfer: false
//   parseFormat: 'yyyy-MM-dd HH:mm:ss.SSS',
//   labelFormat: '',
//   valueFormat: '',
//   startDay: 1,
//   digits: 2,
//   controls: true
// },
// textarea: {
//   size: null
//   autosize: {
//     minRows: 1,
//     maxRows: 10
//   }
// },
// select: {
//   size: null,
//   transfer: false,
//   optionConfig: {
//     keyField: '_X_OPTION_KEY' // 选项数据的唯一主键字段名
//   },
//   multiCharOverflow: 8
// },
// toolbar: {
//   size: null,
//   import: {
//     mode: 'covering'
//   },
//   export: {
//     types: ['csv', 'html', 'xml', 'txt']
//   },
//   custom: {
//     isFooter: true
//   },
//   buttons: [],
//   tools: []
// },
// button: {
//   size: null,
//   transfer: false
// },
// radio: {
//   size: null
// },
// checkbox: {
//   size: null
// },
// switch: {
//   size: null
// },
// modal: {
//   // size: null,
//   minWidth: 340,
//   minHeight: 200,
//   lockView: true,
//   mask: true,
//   duration: 3000,
//   marginSize: 0,
//   dblclickZoom: true,
//   showTitleOverflow: true
//   storage: false
// },
// list: {
//   scrollY: {
//     gt: 100
//   }
// }
})

3、页面中使用：

html

      居左    居中    居右

js

import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup () {
    const allAlign = ref(null)
    const tableData1 = 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' }
    ])
    return {
      allAlign,
      tableData1
    }
  }
})

更多用法见官网：https://vxetable.cn/v4/#/table/base/basic

最终效果图如下：