Vue之使用umy-ui库的u-table解决 el-table当存在大量数据时,界面操作卡顿。
提示:一、下面的1. 对应 二、下面的1.;2.则对应2.
错误排查:在使用中如果出现:readding 'style' undefined类似错误的, 可以先排查 u-table中height的值引起的。这里只以我这里出现的情况为基准作出此提示,仅供参考。
声明:需根据具体需求使用相应表格。例如:u-table 与 wx-grid的区别。
(具体:1.使用u-table 开启use-virtual不支持开展行,如果需要展开行,你是要虚拟表格部分的ux展开行!
2.u-table不支持展开行,需要展开行使用ux-grid
3. ux-grid解决列多 行多导致卡的情况, u-table解决行多的情况,不解决列多的情况(如你的列超过70+,你可能就需要使用ux-grid了,因为此时你需要把列也虚拟))
重点!!!:umy-ui库官网:http://www.umyui.com/umycomponent/u-table-api (具体使用:官网有说明,建议使用前先看看用前须知!!!)
一、安装所需:
1.npm安装 umy-ui库:
npm install umy-ui
2.安装 babel-plugin-component(目的:借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。)
npm install babel-plugin-component -D
二、写入和配置:
1.main.js中写入
// ummy-ui库使用(注:我这里使用的是按需引入。)
import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
import {UTableColumn, UTable,UxGrid,UxTableColumn} from 'umy-ui'; // 按需引入组件
Vue.use(UTableColumn);
Vue.use(UTable);
Vue.use(UxGrid);
Vue.use(UxTableColumn);
2. babelrc文件中plugins添加:
{ "plugins": [ [ "component", { "libraryName": "umy-ui", "styleLibraryName": "theme-chalk" } ] ] }
三、使用代码:
data中: tableData: [], changeHeight: 0, // 表格高度 rowHeight: 35, // 行高( 注: 如果你这里给行高为50,那么你表格行会出现错乱,不要问为啥,因为你可以看看控制台看节点的高是多少,是55,而你这里给50就有问题!)但是由于我在表格的样式中进行了更改所以这里可以使用相同的高度. mounted(挂载完): this.changeHeight = this.$refs.refTableBox.offsetHeight; // 挂载完后就对table的高度先进行赋值. this.$nextTick(() => { // 这是每当浏览器窗口变动时,对table的高度进行更新. window.onresize = () => { // let _temp = window.innerHeight - this.$refs.element.offsetTop; // console.log('`~~~~~~~~~内容高度 = 窗口的文档显示区的高度 - 元素距离浏览器顶部的高度', _temp, ) this.changeHeight = this.$refs.refTableBox.offsetHeight; } }); methods中: scrollBottom () { // 表格滚动到底部 this.$refs.plTable.scrollBottom() }, pagingScrollTopLeft (val) { // 让表格滚动条回到顶部和左侧 // ...top,left -> 距离顶部, 左侧距离。 不传值默认为0 this.$refs.plTable.pagingScrollTopLeft(val, 0) },