使用elementPlus中的穿梭框，由于数据量一万多条，导致内存加载过慢，页面卡顿

先说一下解决方法，个人认为有个比较好的解决方法

延迟加载

①比如我们后端先查询一百条数据返回给前端，

②然后前端用户在这一百条里面发现没有自己想要的内容，他会进行搜索，一般用户就会直接搜索

③然后前端做一个接口，接收搜索框输入的内容，然后将搜索内容返回给后端

④后端根据搜索内容进行查询，然后将查询到的集合返回给前端

⑤前端将集合push到原来的列表中，这里需要做去重处理

直接上代码

    <el-transfer
      v-model="complicationValue"
      filterable
      :filter-method="filterMethod"
      filter-placeholder="请输入搜索内容"
      :data="complicationData"
      :titles="['源列表', '目的列表']"
    />

const fetchComplicationData = async (searchText: string) => {
  try {
    const data = await CaseInfoApi.searchComplications(searchText)
    const newOptions = data.comList.map(item => ({ label: item.name, key: item.id }));
    // 使用 Set 去重，确保不重复添加相同的数据
    const existingKeys = new Set(complicationData.value.map(option => option.key));
    const uniqueNewOptions = newOptions.filter(option => !existingKeys.has(option.key));
    complicationData.value.push(...uniqueNewOptions);
  } catch (error) {
    console.error('Failed to fetch complication data:', error)
  }
}

const debouncedFetchComplicationData = debounce(fetchComplicationData, 500)
const filterMethod = (query, item) => {
  if (query) {
    const found = complicationData.value.some(option => option.label.toLowerCase().includes(query.toLowerCase()))
    if (!found) {
      debouncedFetchComplicationData(query)
    }
    return item.label.toLowerCase().includes(query.toLowerCase())
  }
  return true
}