针对element 的el-table 大数据量的勾选卡顿问题

针对element 的el-table 大数据量的勾选卡顿问题 ,有多种的解决方案,但是我更加倾向于使用uMy-ui

使用方法:

1.  安装  npm install umy-ui

2.引用:

2.1  完整引入

在 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)
  });

2.2 按需引入(2.1和2.2 进行2选1即可)

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将 .babelrc 中plugins添加:
{
  "plugins": [
    [
      "component",
      {
        "libraryName": "umy-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
接下来,如果你只希望引入部分组件,比如 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)

如果数据量过大的情况下, 在更改方式是
把el-table 改为u-table
把el-table-column 改为 u-table-cloumn

同时在u-table的表格中加入大数据量的参数,此参数是必须得 参数为 use-virtual


 
posted @ 2023-03-14 22:39  一封未寄出的信  阅读(1194)  评论(0编辑  收藏  举报