具有数以千计的数据呈现功能的表格增强功能

虚拟表 (vue-table-virtual)

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

具有数以千计的数据呈现功能的表增强功能：使用Reflow，requestAnimationFrame和虚拟滚动增强功能添加通用表主体。

构建设置 (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

  columnsConfig ：require属性，每列配置

• data: table data.

  data ：表数据。

• filters(TBC): to filter table data.

  filters(TBC) ：过滤表数据。

• renderType (default: common): display table body render type,VIRTUAL -> virtual scroll body; ANIMATION -> use window.requestAnimationFrame to render body with frame scroll.

  renderType (默认值： common )：显示表体的渲染类型， renderType >虚拟滚动体； 动画->使用window.requestAnimationFrame渲染带有帧滚动的主体。

• recordKey: require property to optimize the table body to reuse the DOM elements.

  recordKey ：require属性可优化表主体以重用DOM元素。

• height (default: 400): display height of the table in integer number, including header and body.

  height (默认值： 400 )：以整数形式显示表格的高度，包括标题和正文。

• headerHeight (default: 40): display height of the header in integer number.

  headerHeight (默认值： 40 )：以整数形式显示标题的高度。

• 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.

  recordHeight (默认值： 36 )：以整数形式显示项目的高度。对于虚拟主体滚动渲染，用于计算滚动高度和位置。

翻译自: https://vuejsexamples.com/table-enhancement-with-the-thousands-of-data-rendering/