element ui+vue 后台管理系統的新增數據頁面崩潰（處理下拉數據過多）

問題描述：

           客戶測試項目，在錄入好幾頁的數據后，瀏覽器直接崩潰。后發現在錄入數據是內存迅速增長。

 

可能原因：

       前台數據緩存太多導致。檢查代碼，發現下拉緩存數據太多（一個下拉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>