vue3 + Element-Plus的transfer穿梭框组件数据量大卡顿解决方案

问题

使用vue3 + Element-Plus使用transfer, 数据量2000左右页面渲染会卡顿6-8s,非常影响用户体验

解决思路

初步排查卡顿是由于大量dom元素渲染引起的页面卡顿,所以思路是修改element-plus源码,减少首次dom渲染数量.

第一步: 引入transfer组件

下载element-plus源码, 在里面找到transfer组件引入到项目中
1.element-plus源码地址:https://github.com/element-plus/element-plus
2.transfer文件地址:element-plus/packages/components/transfer
3.将文件复制下来放到项目里,并引用(引用代码如下)

<div class="transfer">
      <customTransfer
          v-model="transferValue"
          filterable
          :filter-method="filterMethod"
          :titles="['未标记' + activeNameVal, '已标记' + activeNameVal]"
          :data="transferData"
          :filter-placeholder="'请输入' + activeNameVal + '进行搜索'"
          @change="handleLabel"
       />
</div>

import customTransfer from './transfer/src/transfer.vue';

4.接下来代码提示错,解决思路: 修改绝对路径的依赖引入(前缀带@element-plus的),全部修改内容如下:
(注意:如果项目跟我们一样用的js, 记得取消组件内的所有的ts文件的ts检测)

transfer-panel.ts源码:

import { buildProps, definePropType } from '@element-plus/utils'
import { transferCheckedChangeFn, transferProps } from './transfer'

import type { ExtractPropTypes, VNode } from 'vue'
import type { TransferDataItem, TransferKey } from './transfer'
import type TransferPanel from './transfer-panel.vue'

修改后:

import {buildProps, definePropType} from 'element-plus/es/utils/vue/props/runtime.mjs';
import { transferCheckedChangeFn, transferProps } from './transfer'

import { ExtractPropTypes, VNode } from 'vue'
import { TransferDataItem, TransferKey } from './transfer'
import TransferPanel from './transfer-panel.vue'

transfer.ts源码:

import { isNil } from 'lodash-unified'
import {
  buildProps,
  definePropType,
  isArray,
  mutable,
} from '@element-plus/utils'
import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'

修改后

import {isNil} from 'lodash-unified';
import {buildProps, definePropType} from 'element-plus/es/utils/vue/props/runtime.mjs';
import {mutable} from 'element-plus/es/utils/typescript.mjs';
import {isArray} from '@vue/shared';
import {CHANGE_EVENT, UPDATE_MODEL_EVENT} from 'element-plus/es/constants/event.mjs';

import {ExtractPropTypes, h as H, VNode} from 'vue';
import Transfer from './transfer.vue';

use-move.ts源码:

import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'
import { usePropsAlias } from './use-props-alias'

import type { SetupContext } from 'vue'
import type {
  TransferCheckedState,
  TransferDataItem,
  TransferDirection,
  TransferEmits,
  TransferKey,
  TransferProps,
} from '../transfer'

修改后:

import {CHANGE_EVENT, UPDATE_MODEL_EVENT} from 'element-plus/es/constants/event.mjs';
import { usePropsAlias } from './use-props-alias'

import { SetupContext } from 'vue'
import {
  TransferCheckedState,
  TransferDataItem,
  TransferDirection,
  TransferEmits,
  TransferKey,
  TransferProps,
} from '../transfer'

use-check.ts源码

import { computed, watch } from 'vue'
import { isFunction } from '@element-plus/utils'
import { CHECKED_CHANGE_EVENT } from '../transfer-panel'
import { usePropsAlias } from './use-props-alias'

import type { SetupContext } from 'vue'
import type { CheckboxValueType } from '@element-plus/components/checkbox'
import type { TransferKey } from '../transfer'
import type {
  TransferPanelEmits,
  TransferPanelProps,
  TransferPanelState,
} from '../transfer-panel'

修改后:

import {computed, watch} from 'vue';
import {isFunction} from '@vue/shared';
import {CHECKED_CHANGE_EVENT} from '../transfer-panel';
import {usePropsAlias} from './use-props-alias';

import {SetupContext} from 'vue';
import {CheckboxValueType} from 'element-plus/es/components/checkbox';
import {TransferKey} from '../transfer';
import {
    TransferPanelEmits,
    TransferPanelProps,
    TransferPanelState,
} from '../transfer-panel';

第二步: 优化组件代码解决卡顿问题

. 参考:Element-UI的transfer穿梭框组件数据量大解决方案
我用的是文中的懒加载方法~~大功告成!

总结:

踩在大神的肩膀上终于完成优化穿梭框卡顿的需求啦!感恩! 分享出来希望也可以帮到大家~