iview中如何解决穿梭框数据太多，导致的页面卡，慢情况 （2）

项目背景:
用户组配置用户的时候，采用穿梭框（一口老血） 用户下面人数过多，全部渲染导致页面奇卡，用户体验很差

1、加载全量数据前端做缓存

var contact_info = JSON.parse(
        this.$libs.getSessionStorage('contact_info')
      )
      if (!contact_info) {
        this.$http.alarmCenter.dictContact({}).then(resp => {
          if (resp && resp.resultCode == '0') {
            contact_info = resp.data
            setSessionStorage('contact_info', JSON.stringify(resp.data))
          } else {
            this.$Message.error(resp.result_msg)
          }
        })
      }
      if (contact_info && contact_info.length > 0) {
        var array = contact_info
        this.contactDataMap = this.$libs.arrayToMap(array, 'value', 'children')
        this.userListCache = this.contactDataMap['1']
        this.transferData.total = this.contactDataMap['1'].length
        this.userList = this.contactDataMap['1']
        this.transferData.allDataCache = this.getAllMockData()
        this.transferData.allData = this.getMockData()
      }

2、 添加穿梭框，自定义的搜索框和分页

        <Col span="24">
            <Input
              v-model="filterName"
              @on-change="filterUserList"
              style="margin:5px 30px;width:90%"
              placeholder="请输入要搜索的联系人"
            ></Input>
          </Col>
         <Col span="24" align="center">
            <Transfer
              :data="transferData.allData"
              :list-style="listStyle"
              :titles="transferData.titles"
              :target-keys="transferData.selectedData"
              @on-change="handleChange"
            >
            </Transfer>
            <Spin fix v-if="loading"></Spin>
          </Col>
          <Col span="24">
            <Page
              :total="transferData.total"
              :current="transferData.current"
              :page-size="transferData.pageSize"
              @on-page-size-change="changePageSize"
              @on-change="changePage"
              style="text-align: left; margin:5px"
            />
          </Col>

3、前端用全量数据通过截取做分页，因为穿梭框通过key来做穿梭处理，因此在切换分页的需要将已选择的用户的key，添加到已选择的selectData数组中，
且在编辑用户组的时候，需要将已选择的用户，添加到穿梭框data中以及selectedData，保证渲染的成功

4、自定义的搜索框，监听输入的变化（做防抖处理[抄来的代码]），通过防抖防止频繁调用方法，等用户输入完，调用自定义的方法，从全量数据中，过滤数据进行渲染，通知记得将已选择的用户加入data和selectData中。

  //防抖
    Debounce(func, wait = 300, immediate = false) {
      let timeout
      // 清除定时器
      if (timeout !== null) clearTimeout(timeout)
      // 立即执行，此类情况一般用不到
      if (immediate) {
        var callNow = !timeout
        timeout = setTimeout(function() {
          timeout = null
        }, wait)
        if (callNow) typeof func === 'function' && func()
      } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function() {
          typeof func === 'function' && func()
        }, wait)
      }
    },
    filterUserList(name) {
      this.Debounce(this.filerName(name.data))
    },
    filerName(name) {
      if (name !== null && name !== '') {
        this.transferData.allData = []
        var arr = []
        var reg = new RegExp(name)
        const array = this.transferData.allDataCache
        for (let index = 0; index < array.length; index++) {
          const element = array[index]
          if (element.label.match(reg)) {
            arr.push(element)
          }
        }
        this.transferData.allData = arr.concat(this.getSelectData())
      }
    },
    queryDetail(id) {
      this.loading = true
      var params = {
        groupId: id
      }
      this.$http.alarmCenter.groupDetail(JSON.stringify(params)).then(resp => {
        if (resp && resp.resultCode == '0') {
          var array = resp.data
          this.transferData.selectedData = []
          for (let index = 0; index < array.length; index++) {
            const element = array[index]
            this.transferData.selectedData.push(element.staffId)
            this.transferData.selectedDataCache.push(element.staffId)
          }
          this.transferData.allData = this.getMockData()
          this.loading = false
        } else {
          this.$Message.error(resp.resultMsg)
        }
      })
    },
    getMockData() {
      let mockData = []
      var start = this.transferData.current - 1
      var length = this.transferData.pageSize
      mockData = this.transferData.allDataCache.slice(
        start * length,
        (start + 1) * length
      )
      mockData = mockData.concat(this.getSelectData())
      return mockData
    },
    //已选联系人
    getSelectData() {
      var temp = this.transferData.allDataCache.filter(item => {
        const array = this.transferData.selectedDataCache
        for (let index = 0; index < array.length; index++) {
          let element = array[index]
          if (element == item.staffId) {
            return item
          }
        }
      })
      return temp
    },
    getAllMockData() {
      let mockData = []
      var array = this.userListCache
      for (let index = 0; index < array.length; index++) {
        const element = array[index]
        mockData.push({
          key: element.value,
          staffId: element.value,
          label: element.label
        })
      }
      return mockData
    },
    handleChange(newTargetKeys) {
      var array = newTargetKeys
      for (let index = 0; index < array.length; index++) {
        const element = array[index]
        var temp = this.transferData.selectedDataCache.filter(item => {
          if (element == item) return item
        })
        if (temp.length < 1) {
          this.transferData.selectedDataCache.push(element)
        }
      }
      this.transferData.selectedData = newTargetKeys
    },
    filterMethod(data, query) {
      return data.label.indexOf(query) > -1
    },
    changePageSize(value) {
      this.transferData.pageSize = value
      this.transferData.allData = this.getMockData()
    },
    changePage(value) {
      this.transferData.current = value
      this.transferData.allData = this.getMockData()
    }, 
  }