vue2 + iview（view-design） 中封装使用 vxe-table 处理表格渲染大量数据卡顿现象

今天遇到需求，iview组件分页每页100页时候页面卡顿现象严重，改造为使用vxe-table

@cell-mouseenter="handleCellMouseEnter"

@cell-mouseleave="handleCellMouseLeave"

这两个用来处理vxe-table 内容过多鼠标悬浮上去滚动 tooltip直接消失的问题

:scroll-y="{enabled: true, gt: 0}"   开启大量数据优化

理论上限：纵向最大可以支持 30w 行，当 gt 为 0 时为总是启用。

性能优化：纵向虚拟滚动行高越高越流畅，行高设置 row-config.height

注意slot写法需要修改原版iview配置

改成

<template v-slot:examine_name="{ row }">。。。</template>

renderer组件是处理iview的render，  新建renderer.vue文件输入下面的代码

<script>
export default {
  components: {},
  name: 'renderer',
  props: {
    renderContent: {
      type: Function
    },
    scope: {
      type: Object
    }
  },
  render: function(h) {
    const { renderContent, scope } = this
    return renderContent(h, scope)
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped></style>

使用

import Vue from 'vue'

import vTable from './vTable/index.vue'

Vue.component('vTable', vTable)

旧 ： <Table border :columns="table.columns" :data="table.data" :loading="table.loading"> 

                <template slot-scope="{ row }" slot="examine_name"> 。。。</template>

        </Table>

新 ：  <vTable :table="table">

                <template v-slot:examine_name="{ row }">。。。</template>

        </vTable>

注意vxe-table  列拖拽宽度可以使用minWidth了， 而iview必须有width

使用列复选框

<vTable :table="table" checkbox @on-selection-change="selectionChange">

不要写{ title: '选中', type: 'selection', align: 'center', width: '70' }

注意不要再写iview的这个了，不然项目就卡死机啦！！！

其他配置项见 Vxe Table v3

完整封装代码

<template>
  <div>
    <!-- :row-config="{ isHover: true }" -->
    <vxe-table
      min-height="95"
      :max-height="maxHeight"
      @checkbox-all="selectChangeEvent"
      @checkbox-change="selectChangeEvent"
      @cell-mouseenter="handleCellMouseEnter"
      @cell-mouseleave="handleCellMouseLeave"
      :tooltip-config="{ enterable: true }"
      :column-config="{ resizable: true }"
      :scroll-y="{ enabled: true, gt: 0 }"
      class="mytable-style"
      :data="table.data"
      border
      :loading="table.loading"
    >
      <vxe-column v-if="index" align="center" type="seq" fixed="left" width="60"></vxe-column>
      <vxe-column v-if="checkbox" align="center" type="checkbox" width="60"></vxe-column>
      <vxe-column
        v-for="(column, index) in table.columns"
        :key="column.key + index"
        :field="column.key"
        :title="column.title"
        :min-width="column.minWidth"
        :width="column.width"
        :fixed="column.fixed"
        :align="column.align"
        :title-suffix="column.titleSuffix"
        :show-overflow="column.key !== 'action' ? 'tooltip' : false"
      >
        <!-- 渲染形式 -->
        <template #default="scope" v-if="column.render">
          <renderer :renderContent="column.render" :scope="scope"></renderer>
        </template>
        <!-- 自定义插槽 -->
        <template #default="scope" v-else-if="column.slot">
          <slot :name="column.slot" :row="scope.row"></slot>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import renderer from './renderer.vue'
export default {
  components: { renderer },
  name: 'vTable',
  props: {
    table: { type: Object, default: () => {} },
    // 使用复选框 on-selection-change
    checkbox: { type: Boolean, default: false },
    // 使用index
    index: { type: Boolean, default: false }
  },
  data() {
    return {
      maxHeight: null,
      // maxHeight: 650,
      timeout_showTooltip: null
    }
  },
  mounted() {},
  methods: {
    selectChangeEvent(val) {
      this.$emit('on-selection-change', val.records)
    },
    // methods
    // vxe-table 的 tooltip 加上滚动条后, tooltip 关闭再打开, 滚动条仍然在之前 tooltip 滚动到的位置
    // 因此给 tooltip 的滚动主体加上 scrollTop 置空
    handleCellMouseEnter({ $table }) {
      // 取 tooltip 实例
      const $tooltip = $table && $table.$refs && $table.$refs.tooltip
      if ($tooltip && $tooltip.$el) {
        // 如果此时设置了 tooltip 要显示但尚未生效, 则延时显示 tooltip , 避免 tooltip 内滚动条还未重置
        // 注意, 此处是"鼠标移入单元格, 即将显示 tooltip"场景, 在此处处理 scrollTop 重置
        // 不在 mouseleave 处理, 是因为 mouseleave 时这两个数据不准, 从一个有 tooltip 的 cell 移动到下一个, 这两个数据仍然是 true , 因此无法做到"鼠标移出单元格, tooltip 即将关闭, 此时重置 scrollTop"
        if ($table.tooltipStore.visible && !$tooltip.visible) {
          // 清除旧延时, 避免快速切换 tooltip 时, tooltip 的滚动条还未重置就显示出来了
          if (this.timeout_showTooltip) {
            clearTimeout(this.timeout_showTooltip)
          }
          // 延时显示 tooltip
          this.delayShowTooltip($tooltip.$el)
        }
      }
    },
    // 延时显示 vxe-table tooltip
    // 因为 tooltipEl 为 display none 状态时设置 scrollTop 无效, 所以先通过 visibility 隐藏 tooltip , 重置 scrollTop 完毕后再恢复 visible
    delayShowTooltip(tooltipEl) {
      // 取 tooltip 滚动主体元素
      const tooltipContentEl = tooltipEl.querySelector('.vxe-table--tooltip-content')
      if (tooltipContentEl) {
        tooltipEl.style.visibility = 'hidden'
        this.timeout_showTooltip = setTimeout(() => {
          tooltipContentEl.scrollTop = 0
          tooltipEl.style.visibility = 'visible'
          this.timeout_showTooltip = null
        }, 600) // 延时 600 是因为 tooltip 默认 enterDelay 为 500 , 低于 500 会因为 tooltip el 尚未 display , 导致 scrollTop 设置仍然无效
      }
    },
    // vxe-table 的 tooltip , 存在"内部滚动条滚动时触发 table 的 mousewheel 事件, 导致 table 主动关闭 tooltip"问题
    // 因此给 tooltip 滚动主体加上 mousewheel stopPropagation , 停止向上传递 mousewheel 事件给 table
    handleCellMouseLeave({ $table }) {
      // 取 tooltip 实例
      const $tooltip = $table && $table.$refs && $table.$refs.tooltip
      if ($tooltip && $tooltip.$el) {
        // 取 tooltip 滚动主体元素
        const tooltipContentEl = $tooltip.$el.querySelector('.vxe-table--tooltip-content')
        if (tooltipContentEl && !tooltipContentEl.onmousewheel) {
          tooltipContentEl.onmousewheel = e => e.stopPropagation()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .vxe-header--column {
  background-color: #f0f2f5 !important;
  border-right: 1px solid #dcdee2 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
::v-deep .vxe-body--column {
  background-image: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}
::v-deep .vxe-table--tooltip-arrow {
  display: none;
  visibility: hidden;
}
</style>
<style>
/* .vxe-table--render-default .vxe-table--scroll-y-handle, .vxe-table--render-default .vxe-table--scroll-y-virtual{
  right: auto !important;
} */
.vxe-table--tooltip-wrapper {
  max-width: 300px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  background-color: rgba(70, 76, 91, 0.9) !important;
  color: #fff !important;
  padding: 8px 12px !important;
  font-size: 15px;
}
.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow,
.vxe-table--tooltip-wrapper.theme--dark.placement--top .vxe-table--tooltip-arrow:before {
  display: none;
}
.vxe-table--tooltip-wrapper.placement--top.is--enterable:after {
  bottom: 0px;
}
.vxe-table--empty-content {
  color: #303133;
}
</style>