vxe-table 3.x 虚拟滚动实例
时间: 2024-02-27 19:49:04 浏览: 144
以下是vxe-table 3.x版本的虚拟滚动实例:
```vue
<template>
<div>
<vxe-table
:data="tableData"
:columns="columns"
height="400px"
border
resizable
show-overflow
highlight-current-row
virtual-scroll
></vxe-table>
</div>
</template>
<script>
import 'vxe-table/lib/style.css';import { VXETable } from 'vxe-table';
import XEUtils from 'xe-utils';
export default {
data() {
return {
tableData: [],
columns: [
{ field: 'name', title: '姓名', width: 100 },
{ field: 'age', title: '年龄', width: 100 },
{ field: 'address', title: '地址', width: 200 },
{ field: 'email', title: '邮箱', width: 200 },
{ field: 'phone', title: '电话', width: 150 },
{ field: 'company', title: '公司', width: 200 },
{ field: 'job', title: '职位', width: 150 },
{ field: 'date', title: '日期', width: 150 }
]
};
},
created() {
this.tableData = XEUtils.mapTree(XEUtils.times(10000, index => {
return {
id: 1000 + index,
name: '测试数据' + (index + 1),
age: XEUtils.toValueString(20 + XEUtils.random(10, 50)),
address: '地址' + (index + 1),
email: 'test' + (index + 1) + '@test.com',
phone: '1300000000' + XEUtils.toValueString(XEUtils.random(1000, 9999)),
company: '公司' + (index + 1),
job: '职位' + (index + 1),
date: XEUtils.toDateString(XEUtils.randomDate('2010-01-01', '2022-12-31'), 'yyyy-MM-dd HH:mm:ss')
};
}), {
key: 'id',
parentKey: 'pid'
});
},
mounted() {
VXETable.use(VXETable.VXETablePluginVirtualTree);
}
};
</script>
```
阅读全文
相关推荐



















