这是一个ant的虚拟表格，用于解决大数据渲染时
English | 简体中文
这是一个ant的虚拟表格，用于解决大数据渲染时页面卡顿的问题，本组件是对ant.desigin中Table组件进行一层封装，属性完全与原组件Table保持一致 AntDesign Table，可以让你像使用普通table一样使用虚拟table。例子中处理渲染1000万条数据，页面也非常流畅。在线demo
设计说明考虑到兼容性问题，内部通过监听Table的滚动事件判断滑动行的位置，没有采用H5新特性IntersectionObserver。因此兼容性问题是比较好的。另外组件引入loash的throttle处理抖动问题，目前没有采用raf
React ant-virtual-table
npm install ant-virtual-table --save-dev
Usage 例子
import React, { Component, Fragment } from 'react'
import { VirtualTable } from 'ant-virtual-table'
import 'antd/dist/antd.css'
const columns = [
{
title: '序号',
dataIndex: 'id',
width: 100
},
{
title: '姓名',
dataIndex: 'name',
width: 150
},
{
title: '年龄',
dataIndex: 'age',
width: 100
},
{
title: '性别',
dataIndex: 'sex',
width: 100,
render: (text) => {
return text === 'male' ? '男' : '女'
}
},
{
title: '地址',
dataIndex: 'address',
key: 'address'
}
]
function generateData () {
const res = []
const names = ['Tom', 'Marry', 'Jack', 'Lorry', 'Tanken', 'Salla']
const sexs = ['male', 'female']
for (let i = 0; i < 10000000; i++) {
let obj = {
id: i,
name: names[i % names.length] + i,
sex: sexs[i % sexs.length],
age: 15 + Math.round(10 * Math.random()),
address: '浙江省杭州市西湖区华星时代广场2号楼'
}
res.push(obj)
}
return res
}
const dataSource = generateData()
class App extends Component {
render () {
return (
<Fragment>
<VirtualTable
columns={columns}
dataSource={dataSource}
rowKey='id'
pagination={{ pageSize: 40 }}
scroll={{ y: 400 }}
bordered
/>
</Fragment>
)
}
}
Prop Types
为降低迁移成本，属性与antd的Table完全保持一致，暂时没有自身独特的属性
注意目前暂不支持内嵌tree等复杂的表单结构，任何复杂的表单结构都不建议使用，后续跟进当中...
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
