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>