针对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