赞
踩
1.先安装,
npm install umy-ui
- import { UTable, UTableColumn } from "umy-ui";
- import "umy-ui/lib/theme-chalk/index.css";//引用样式
- Vue.component(UTable.name, UTable);
- Vue.component(UTableColumn.name, UTableColumn);
2.使用虚拟列表
umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库,完美解决表格万级数据渲染卡顿问题
引用官方文档:当`u-table`元素中注入`data`对象数组后,添加use-virtual属性开启虚拟,同时设置row-height行高(它有默认值,请看文档),同时必须给定height,或者max-height。
- <u-table
- :data="list"
- border
- use-virtual
- :row-height="70"
- :header-cell-style="{ background: '#16a3b6', color: '#fff' }"
- style="width: 100%"
- :height="height"
- >
基本上就ok了
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。