如何利用virtual-scroll 虚拟列表搜索多选和保存所有选中的值

当前虚拟列表的用法：

 <virtual-scroll
        :data="listData"
        :item-size="10"
        key-prop="sellerOrderId"
        @change="renderData => (virtualList = renderData)"
        @selection-change="doTableSelection"
        ref="virtualRef"
      >
        <el-table
          :empty-text="emptyText"
          ref="listTable"
          max-height="780"
          class="com_table_box table"
          border
          :row-key="reserveSelection"
          :data="virtualList"
          :fit="true"
        >
          <virtual-column
            width="60"
            type="selection"
            :selectable="setSelectable"
          >
              </virtual-column>
          <el-table-column :label="LANMSG.table.platform">
            <template slot-scope="scope">
              <span class="tabel_text">{{
                scope.row.platform | isEmptyVal
              }}</span>
              <el-tooltip :content="scope.row.siteCode | isEmptyVal">
                <el-tag class="tabel_text textEllipsis">
                  {{ scope.row.siteCode | isEmptyVal }}
                </el-tag>
              </el-tooltip>
            </template>
          </el-table-column>
          <!-- <el-table-column :label="LANMSG.table.dataType">
          <template slot-scope="scope">
            <span :class="scope.row.syncType === 1 ? 'file' : 'data'">
              {{ scope.row.syncType === 1 ? '文件上传' : '系统同步' }}
            </span>
          </template>
        </el-table-column> -->
          <el-table-column :label="LANMSG.table.shopName">
            <template slot-scope="scope">
              {{ scope.row.accountName | isEmptyVal }}
            </template>
          </el-table-column>
          <el-table-column :label="LANMSG.table.orderNo">
            <template slot-scope="scope">
              {{ scope.row.sellerOrderId | isEmptyVal }}
            </template>
          </el-table-column>
          <el-table-column :label="LANMSG.table.orderTotal">
            <template slot-scope="scope">
              {{ scope.row.totalPrice }}
            </template>
          </el-table-column>
          <el-table-column :label="LANMSG.table.SubtotalGoods">
            <template slot-scope="scope">
            <span class="blue">  {{ scope.row.itemPriceTotal }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="LANMSG.table.currency">
            <template slot-scope="scope">
              {{ scope.row.totalPriceCurrency | isEmptyVal }}
            </template>
          </el-table-column>
          <el-table-column :label="LANMSG.table.time">
            <template slot-scope="scope">
              {{ scope.row.orderCreateTime | isEmptyVal }}
            </template>
          </el-table-column>
          <!-- <el-table-column  :label="LANMSG.table.hasTicket">
          <template slot-scope="scope"> {{ scope.row.labelingTotalTrade | formatUSD('') }}
          </template>
        </el-table-column> -->
          <el-table-column :label="LANMSG.table.status">
            <template slot-scope="scope">
              {{ setStatus(scope.row.reportStatus) | isEmptyVal }}
            </template>
          </el-table-column>
          <el-table-column width="140px" :label="LANMSG.table.operate">
            <!-- <template slot="header">
            {{ LANMSG.table.operate }}
            <el-tooltip effect="dark" content="清空数据后将不纳入总额统计，点击“恢复”可恢复初始数据" placement="top-start">
              <i class="el-icon-warning"></i>
            </el-tooltip> -->
            <!-- <el-select class="el_condition w100px" v-model="searchValues.clearType" :placeholderfileList="LANMSG.placeholder.clear">
              <el-option v-for="item in dataTypeOpt" :key="item.key" :label="item.label" :value="item.key">
              </el-option>
            </el-select> -->
            <!-- </template> -->
            <template slot-scope="scope">
              <el-button type="text" @click="doDetail(scope.row)">{{
                LANMSG.button.detail
              }}</el-button>
              <!-- <el-button type="text" v-if="scope.row.isClear" class="delete_btn" @click="doClear(scope.row)">{{
                LANMSG.button.clear
            }}</el-button>
            <el-button type="text" v-else @click="doRecover(scope.row)">{{
                LANMSG.button.recover
            }}</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </virtual-scroll>

在这里插入代码片
首选定义几个参数：
listData: [], //列表返回的值
shopSelection: [], // 所有选中的值
shopSelectionCurrArr: [], // 当前列表选中的值
clearShopData: [], // 清空的列表
其次1:在第一次进入页面的时候，获取当前列表的值。

   /* 初始化列表页 */
    loadList () {
      const loadTips = Loading.service()
      const sendData = this.clearQueryData()
      this.$ajax({
        method: 'POST',
        url: apiPath.serviceMana.service.orderReport.preview,
        data: sendData
      })
        .then(res => {
          this.shopSelectionCurrArr = []
          loadTips.close()
          //  如何存在isSearchAll 则表示从订单号和状态里面来的，则不需要清空币制和选中的值。
          if (res && res.data.orderList) {
            let data = res.data || []
            data.orderList.forEach(item => {
              if (item.orderDetails) {
                item.orderDetails.forEach(ite => {
                  ite.model = ite.sku
                  ite.quantity = ite.qtyOrdered
                  ite.productName = ite.itemName
                })
              }
            })
            this.$set(this, 'listData', data.orderList || [])
            // 点击数据预览且没有数据时需提示
            if (this.isPreview && this.listData.length === 0) {
              return common.warningInfoTip(
                '暂无店铺订单数据，请重新选择申报月份或到ERP平台完成店铺授权',
                '数据同步失败!'
              )
            }
            this.isPreview = false
            this.page.total = res.data.total
          } else {
            this.$set(this, 'listData', [])
            this.page.total = 0
          }
          if (!this.listData.length) {
            this.emptyText = this.LANMSG.table.noData
          }
          setTimeout(() => {
            if (this.isSearchAll) {
              // 判断 1、this.shopSelection 是否存在。如果不存在，则表示第一次进入或者全部清空搜索了，
              // 如果存在，则拿所有选中的值，和当前列表的值进行比较。把相对的值添加到当前列表选中的值（shopSelectionCurrArr）
              this.shopSelection && this.shopSelection.forEach(item => {
                this.listData.forEach((ite, ind) => {
                  if (ite.sellerOrderId === item.sellerOrderId) {
                    this.$refs.listTable.toggleRowSelection(ite)
                    this.$refs.virtualRef.toggleRowSelection(ite)
                    this.shopSelectionCurrArr.push(ite)
                  }
                })
              })
            }
          }, 100)
        })
        .catch(() => {
          loadTips.close()
        })
    },

敲重点：当前选中的方法doTableSelection
如何判断是否添加了新的元素和删除了之前的元素

 doTableSelection (selection) {
      let setList = this.shopSelection // 获取目前所有已选中的
      const getSelectChangeList = selection // 获取当前列表最终选中的值
      const getCurDefuitList = this.shopSelectionCurrArr // 获取当前默认选中的值
      setTimeout(() => {
        // 当前列表处理新增
        getSelectChangeList.forEach(item => {
          // 如果当前列表选中的在所有已选中的列表中没有存在时
          const isAdd = setList.findIndex((subItem) => subItem.sellerOrderId === item.sellerOrderId) === -1
          if (isAdd) {
            setList.push(item)
          }
        })
        let removeArr = [] // 应该被移除的数组
        getCurDefuitList.forEach((item, index) => {
          const ind = getSelectChangeList.findIndex((subItem) => subItem.sellerOrderId === item.sellerOrderId)
          // 如果在当前列表最终选中的列表中没有找到默认被选中的值，则把需要从所有已选中相关的productId拿出来
          if (ind === -1) {
            removeArr.push(item.sellerOrderId)
          }
        })
        // 移除操作
        removeArr.forEach(item => {
          const ind = setList.findIndex((subItem) => subItem.sellerOrderId === item)
          setList.splice(ind, 1)
        })
        this.shopSelectionCurrArr = selection
        this.shopSelection = setList
      })
    },