当前位置:   article > 正文

elementui结合虚拟列表umy-ui使用_element 虚拟列表

element 虚拟列表

1.先安装,

npm install umy-ui
  1. import { UTable, UTableColumn } from "umy-ui";
  2. import "umy-ui/lib/theme-chalk/index.css";//引用样式
  3. Vue.component(UTable.name, UTable);
  4. Vue.component(UTableColumn.name, UTableColumn);

2.使用虚拟列表

umy-ui开发文档 - 为开发者准备的基于 Vue 2.0 的桌面端组件库,完美解决表格万级数据渲染卡顿问题
引用官方文档:当`u-table`元素中注入`data`对象数组后,添加use-virtual属性开启虚拟,同时设置row-height行高(它有默认值,请看文档),同时必须给定height,或者max-height。

  1. <u-table
  2. :data="list"
  3. border
  4. use-virtual
  5. :row-height="70"
  6. :header-cell-style="{ background: '#16a3b6', color: '#fff' }"
  7. style="width: 100%"
  8. :height="height"
  9. >

基本上就ok了

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/115413
推荐阅读
相关标签
  

闽ICP备14008679号