针对上万级别Tree树节点和Table表格性能卡顿问题优化
虚拟滚动
原理:
上部隐藏区:相当于滚动后隐藏的部分
实际展示区:实际渲染的内容
下部隐藏区:未展示的部分
效果图:每次滚动,动态设置,上部隐藏区和下部隐藏区的高度,以及实际展示内容的索引
代码具体实现
package.json 引入
"@femessage/element-ui": "^2.22.0",
"umy-ui": "^1.1.6",
main.js 引入相关依赖
import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';// 引入样式
import Element from '@femessage/element-ui'
import '@femessage/element-ui/lib/theme-chalk/index.css';
Vue.use(Element)
Vue.use(UmyUi);
Vue.use(ViewUI);
Vue.config.productionTip = false
xxx.vue 页面实现
<u-table
ref="plTable"
:max-height="700"
use-virtual
@table-body-scroll="tableScroll"
:data-changes-scroll-top="radio === 1"
:row-height="rowHeight"
border>
<u-table-column type="index" width="100" fixed/>
<u-table-column
v-for="item in columns"
:key="item.id"
:resizable="item.resizable"
:show-overflow-tooltip="item.showOverflow"
:prop="item.prop"
:label="item.label"
:fixed="item.fixed"
:width="item.width"/>
</u-table>
注释:u-table 必须设置 max-height 或者 height 属性否则 虚拟滑动则会时效
参考链接
umy-ui 官网链接: http://www.umyui.com/umycomponent/virtualScrolling
相关代码gitee链接: https://gitee.com/liix/table-umy.git