vue2 element 使用虚拟表格
时间: 2023-09-18 18:11:44 浏览: 156
虚拟表格(Virtual Table)是一种优化大量数据展示的技术,通过动态渲染和复用 DOM 元素来提升性能。在 Vue2 Element 中,可以使用 ElTable 组件的 virtual-scroll 属性来开启虚拟滚动。
1. 安装 Element UI
在项目中安装 Element UI:
```
npm install element-ui -S
```
2. 引入组件
在需要使用虚拟表格的页面中,引入 ElTable 组件:
```
import { ElTable } from 'element-ui';
```
3. 开启虚拟滚动
在 ElTable 组件上设置 virtual-scroll 属性为 true,同时设置 row-height 属性为每行高度(单位为像素):
```
<el-table :data="tableData" :height="tableHeight" :row-height="rowHeight" :virtual-scroll="true">
```
4. 设置表格高度
为了保证虚拟滚动的正常运行,需要设置表格的固定高度,例如:
```
data() {
return {
tableData: [], // 表格数据
tableHeight: 500, // 表格高度
rowHeight: 40, // 每行高度
};
},
```
5. 渲染数据
最后,在组件的 mounted 钩子中异步获取数据并渲染到表格中:
```
mounted() {
this.getTableData().then(data => {
this.tableData = data;
});
},
methods: {
getTableData() {
// 异步获取数据
},
},
```