针对上万级别Tree树节点和Table表格性能卡顿问题优化

针对上万级别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