ElementPlus 穿梭框支持批量穿梭

米方2025-12-12 15:21

按照目前的方案试了**el-virtual-transfer**: ，这个库对于vue3+ts的代码无效。

方案：魔改原生的transfer组件，把原来的el-checkbox包一层虚拟滚动列表

废话不多说:实现的效果如下：

批量勾选3000个设备到左边做到不卡顿

关键代码：

复制代码

      <ElCheckboxGroup
        v-show="!hasNoMatch && data.length > 0"
        v-model="checked"
        :class="{ 'is-filterable': filterable }"
        class="el-transfer-panel__list"
        style="display: flex; flex-direction: column; height: 100%; overflow: hidden"
      >
        <VirtualList
          v-if="virtualScroll && filteredData.length > 0"
          style="flex: 1; height: 400px; overflow-y: auto"
          :data-key="propsAlias.key"
          :data-sources="filteredData"
          :data-component="TransferCheckboxItem"
          :estimate-size="40"
        />
        <template v-else>
          <ElCheckbox
            v-for="item in filteredData"
            :key="item[propsAlias.key]"
            :class="ns.be('panel', 'item')"
            :value="item[propsAlias.key]"
            :disabled="item[propsAlias.disabled]"
            :validate-event="false"
          >
            <OptionContent :option="optionRender?.(item)" />
          </ElCheckbox>
        </template>
      </ElCheckboxGroup>


import VirtualList from "vue3-virtual-scroll-list";

<customTransfer
        ref="transferRef"
        v-model="selectedDeviceKeys"
        :data="transferData"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入关键字进行模糊搜索"
        :titles="transferTitles"
        :button-texts="['解绑', '绑定']"
        class="full-height-transfer"
        :virtual-scroll="true"
/>

项目地址：https://github.com/EmilyHOC/el-transfer-pannel-bigData/tree/main