...扩展运算符的实际项目使用

Posted 2021-01-13 xyyyy

<div class="common-div black-div" v-show="mainData.length > 0" style="display: none">
  <div class="main-common-div">
    <div class="common-part-div div-part-3">
      授信借款人
    </div>
    <div class="common-part-div div-part-7">
      业务编号
    </div>
  </div>
</div>

<div v-infinite-scroll="loadMore"
     infinite-scroll-disabled="loading"
     infinite-scroll-immediate-check="false"
     infinite-scroll-distance="5">
  <div class="common-div " v-for="item in mainData">
    <div class="main-common-div" @click="goUrl(item)">
      <div class="common-part-div div-part-3">
        {{item.trueName}}
      </div>
      <div class="common-part-div div-part-7">
        {{item.creditSn}}
      </div>
      <img class="right-img" src="../../../assets/images/right.png" >
    </div>
  </div>
</div>

<loadingNot v-show="typeof(mainData) == ‘object‘ && mainData.length == 0" style="display: none"></loadingNot>
data(){
　　return {

　　　mainData: ‘‘,     // 数据存放处

　　}
}
这样子一开始的时候定义数据为‘‘的时候 是不会展示loadingNot，ajax 获取到数据的时候 如果是下拉刷新的话  为 ‘‘的mainData 就无法使用 push 方法，
那么这个时候就需要用  扩展运算符 ...

this.$ajax({
  url: "/api/app/credit/page?type=17",
  data: {
    current: this.current,
    size: this.size
  },
  loading: 2
}, res => {
  if (res.code == 1) {
    this.mainData = [...this.mainData, ...res.records];
    this.current++;
    this.loading = false;
    if (this.size * (this.current - 1) > this.total) {
      this.isEnd = true;
      this.$alert("已加载所有数据");
    }
    this.total = res.total;
  }
});
//例如  [...‘‘,...[123]]    //[123]这样子就能成功将后面的数据 类似于push 的方法操过过来了。