大数据表格卡顿处理问题umi-ui

在开发大型项目或者数据过的项目时候，我们会因为数据量过大而导致表格卡顿问题及其棘手，这里我就推荐大家可以试试使用umi-ui组件库，几万数据无卡顿方便很多 ，而且是基于element-ui去做的，我自己也是尝试过ant design vue都能按需引入不冲突 下面我就介绍一下用法

用前须知

1.下面文字中描述得element，ele, el-table关键字，如果你不知道这是啥，也没事，你可以是个小白新手，直接看文档即可上手！

2.表格解决卡顿问题，那么虚拟表格原理呢大概就是： 减少对DOM节点的渲染，通过滚动函数节流实现滚动后事件来动态渲染数据

3.基础表格其实就是element的表格的升级版，修改了ele的表格bug（如果你想使用个普通表格你无需安装其他库，就使用这个表格即可），你可以发现基础表格里面的示例没有配置：use-virtual 这个属性。

4.基础表格没有使用use-virtual属性，代表表格数据不多，只想要一个普通的表格。如果你表格卡。请你关注下虚拟表格部分。

5.使用u-table 开启use-virtual虚拟可以支持微小的合并行|列 如2列 2行，支持多级头, 超过2行2列可能布局错乱，因为虚拟滚动的原理导致某些节点并未渲染。

6.使用u-table 开启use-virtual不支持开展行，如果需要展开行，你是要虚拟表格部分的ux展开行！

7.u-table不支持展开行，需要展开行使用ux-grid。

8.ux-grid解决列多 行多导致卡的情况， u-table解决行多的情况，不解决列多的情况（如你的列超70+，你可能就需要使用ux-grid了，因为此时你需要把列也虚拟）

9.重点：虚拟表格集成了基础表格的东西（如属性/方法/事件）！

10.虚拟表格在本文档中呢， 意思就是解决了数据量多导致卡顿的情况！ 基础表格在文档中呢，意思就是升级版的el-table（但是没解决数据多卡的情况）！

11.编辑型表格呢，是解决那种表格单元带有输入框或者选择时间等等的情况，而导致卡顿的场景！意思就是表格单元格具有一定的操作，单元格有自定义组件或者UI库组件等等

11.有了表格,怎么导出表格数据为excel并且带样式呢?,请点击:链接: git地址

下载umy-ui插件 下载插件。

//下载插件
npm install umy-ui

在全局注册一下 main.js。

  import Vue from 'vue';
  import UmyUi from 'umy-ui'
  import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
  import App from './App.vue';

  Vue.use(UmyUi);

  new Vue({
    el: '#app',
    render: h => h(App)
  });

按需引入

借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：

// 下载插件
npm install babel-plugin-component -D

然后，将.babelrc 中plugins添加：

{
  "plugins": [
    [
      "component",
      {
        "libraryName": "umy-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 UTable, UTableColumn，(UTable是表格，UTableColumn是表格头)那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { UTable, UTableColumn } from 'umy-ui';
import App from './App.vue';

Vue.component(UTable.name, UTable);
Vue.component(UTableColumn.name, UTableColumn);
/* 或写为
 * Vue.use(UTable)
 * Vue.use(UTableColumn)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

完整使用方式如下

import Vue from 'vue';
import {
  UTableColumn,
  UTable,
  UxGrid,
  UxTableColumn
} from 'umy-ui';

Vue.use(UTableColumn);
Vue.use(UTable);
Vue.use(UxGrid);
Vue.use(UxTableColumn);

umy-ui开发文档: 点击跳转链接