Vue table optimization

A Vue.js project

Version: 1.0.10 Updated: 11/25/2019

By: gexiaoyan License: MIT

Downloads Last 30 Days: 249


npm i vue-table-optimization
yarn add vue-table-optimization





Only study only, for the virtual scroll design,please refer the wiki, Vue - Table表格渲染上千数据优化

Table enhancement with the thousands of data rendering: add common table body with Reflow, requestAnimationFrame and virtual scroll enhancement

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:7777
npm run dev

# build for production with minification
npm run build

Table Config

  • columnsConfig: require property, Each column config
  • data: table data.
  • filters(TBC): to filter table data.
  • renderType (default: common): display table body render type,VIRTUAL -> virtual scroll body; ANIMATION -> use window.requestAnimationFrame to render body with frame scroll.
  • recordKey: require property to optimize the table body to reuse the DOM elements.
  • height (default: 400): display height of the table in integer number, including header and body.
  • headerHeight (default: 40): display height of the header in integer number.
  • recordHeight (default: 36): display height of the items in integer number.For virtual body scroll render,it used to calculate the scroll height and position.


  • title: 列头显示文字
  • key: 对应列内容的字段名
  • render: 自定义渲染列,使用 Vue 的 Render 函数



Categories: Vue js