問題描述：

客戶測試專案，在錄入好幾頁的資料後，瀏覽器直接崩潰。後發現在錄入資料是記憶體迅速增長。

可能原因：

前臺資料快取太多導致。檢查程式碼，發現下拉快取資料太多（一個下拉700多條資料）

處理思路：

把下拉做成分頁形式，每展示一頁資料都向後臺請求

程式碼：

<el-form-item prop="goodsId" label="物料：">
  <el-select
    v-model="formData.goodsId"
    filterable
    clearable
    value-key="matterId"
    placeholder="請選擇物料
 
    :filter-method="searchGoodsCost"
    @focus="focusGoodsCost"
  >
    <el-option
      v-for="item in matterList"
      :key="item.matterId"
      :label="item.matterName"
      :value="item.matterId"
    ></el-option>
    <el-pagination
            @current-change="handleGoodsCostCurrentChange"
 
            :current-page.sync="searchMatterPager.curPage"
            :page-size="searchMatterPager.pageSize"
            :total="searchMatterPager.total"
            layout="prev, pager, next"
            :pager-count="5"
    ></el-pagination>
  </el-select>
</el-form-item>

searchGoodsCost：下拉模糊查詢，獲取下拉資料和this.searchMatterPager.total。可檢視element ui 文件
 
https://element.faas.ele.me/#/zh-CN/component/select

<script>

methods：{

//物料下拉分頁
handleGoodsCostCurrentChange(e){
//修改回顯，點選翻頁時，需清除goodsId

  if(e){
    this.formData.goodsId = ''
  }
//修改回顯情況下
  if(this.formData.goodsId){
    this.handleGoodsCost()
  }else if(this.goodsCostData){
    this.searchGoodsCost(this.goodsCostData)   //模糊查詢情況下
  }else{
    this.portGoodsCost(Object.assign({},this.searchMatterPager))
  }
},
// 根據貨物id獲取，貨物所在頁的頁數，並重新呼叫介面
handleGoodsCost(){
  if(this.formData.goodsId){
    let _this = this
    FindCurPageForMatter({matterId: this.formData.goodsId})
            .then(res=>{
              this.loading = false;
              if(res.code === 1){
                this.searchMatterPager.curPage = res.result
                this.portGoodsCost(Object.assign({},this.searchMatterPager))
              }else {
                this.loading = false;
                this.errorMessage(res.message);
              }
            })
            .catch(err=>{
              this.loading = false;
              this.errorMessage(err.message);
            })
  }else if(this.goodsCostData){
    this.searchGoodsCost(this.goodsCostData)
  }
},
//物料下拉模糊查詢
searchGoodsCost(val){
  this.goodsCostData = val
  let data={
    matterName:val
  }
  this.portGoodsCost(Object.assign({},data,this.searchMatterPager))
},
//獲取貨物下拉的介面
portGoodsCost(val){
  let _this = this
  FindMatterList(val)
          .then(res => {
            this.loading = false;
            if (res.code === 1) {
              _this.matterList = res.result.data
              _this.searchMatterPager.total = res.result.totalRecords
            }else {
              this.loading = false;
              this.errorMessage(res.message);
            }
          })
          .catch(err => {
            this.loading = false;
            this.errorMessage(err.message);
          });
},
//獲取焦點時，初始化資料（頁數，清空查詢記錄，下拉資料）
focusGoodsCost(){
  this.searchMatterPager.curPage = 1
  this.goodsCostData = ''
  this.portGoodsCost(Object.assign({},this.searchMatterPager))
},
}

</script>