Select 选择器的远程搜索、滚动加载时数据冗余优化

435 阅读1分钟

在滚动加载时,每一次加载出来的数据都有上一页的数据,数据冗余

<el-select
  v-model="queryParams.equipmentTypeCode"
  filterable
  remote
  placeholder="请输入"
  :remote-method="getModelFistPage"
  :popper-append-to-body="false"
  v-loadmore="getModelList"     //自定义指令
>
  <el-option
    v-for="item in modelList.list"
    :key="item.value"
    :value="item.value"
    :label="item.label"
  >
  </el-option>
</el-select>
data(){
  return{
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      equipmentTypeCode: null,
    },
    modelList: {
      list: [],
      loading: false,  
      loaded: false,
      pageSize: 10,
      total: 0,
      name: null,
    },
  }
}
methods:{
 async getModelFistPage (name) {
  this.modelList.list = [];
  this.modelList.loaded = false;
  this.modelList.name = name;
  return await this.getModelList();
 },
 async getModelList () {
  if (this.modelList.loading || (this.modelList.loaded && this.modelList.list.length >= this.modelList.total)) {
    return;
  }
  this.modelList.loading = true;
  try {
    const pageNum = Math.floor(this.modelList.list.length / this.modelList.pageSize);
    const { data: { data, total } } = await Api.equipmentModel({
      pageNum: pageNum + 1,
      pageSize: this.modelList.pageSize,
      name: this.modelList.name,
    });
    this.modelList.total = total;
    this.modelList.loaded = true;
    this.modelList.list.splice(pageNum * this.modelList.pageSize, this.modelList.pageSize);
    this.modelList.list.push(...data.map(item => ({ value: item.cardNo, label: item.name })));
  } finally {
    this.modelList.loading = false;
  }
 },
},
mounted(){
    this.getModelFistPage();
}

loading正在加载,在请求结束之前即使滚动条到底部也不进行下一次请求
loaded是指加载完成
在mounted上挂载,初次点击时出现下拉框

image.png