分页封装后续bug优化

存在的问题：

1.下一页按钮的禁用状态判断存在问题

2.关于分页按钮这个数组无限添加的优化

3.改变每页数量直接将当前页设置为1

html

<div style="margin: 10px">
    <ul class="listOption" style="float: right">
      <span class="ivu-page-total span-style" v-if="totalResults !== undefined"
        >共 {{ totalResults }}<span v-if="totalResults === 5000"> + </span> 条</span
      >
      <li
        v-if="totalResults >= rows"
        title="上一页"
        class="ivu-page-prev"
        :class="{ 'a-disable': current == 1 }"
        @click="setPage(current - 1)"
      >
        <a class="a-size"><i class="el-icon-arrow-left ivu-icon-ios-arrow-left"></i></a>
      </li>
      <li
        v-for="( item, index ) in pageList"
        v-bind:key="index"
        :title="item"
        class="ivu-page-item my-page-item"
        :class="{ 'ivu-page-item-active': item == current }"
        @click="setPage(item)"
      >
        <a class="a-size">{{ item }}</a>
      </li>
      <li
        v-if="totalResults >= rows"
        title="下一页"
        class="ivu-page-next"
        :class="{ 'a-disable': nextClick === true }"
        @click="setPage(current + 1)"
      >
        <a class="a-size"><i class="el-icon-arrow-right ivu-icon-ios-arrow-right"></i></a>
      </li>
      <div class="ivu-page-options select-style">
        <el-select
          v-model="rows"
          style="width: 100px; margin-right: 10px"
          size="mini"
          @change="changeSize"
        >
          <el-option
            v-for="item in pageSize"
            :value="item.value"
            :label="item.label"
            :key="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </ul>
  </div>

js:

export default {
  props: ["flag", "advance", "nextPages", "pageSizes", "totalResults"],
  data() {
    return {
      current: 1, //当前页码
      pageClicked: 1, //点击页码
      rows: 10, // 当前分页每页展示条数
      sizeList: [10, 20, 30, 40],
      nowPage: 10,
      allPage: 0, // 总分页数
      nextClick: false
    };
  },
  computed: {
    // allPage() {
    //   console.log(this.current);
    //   console.log(this.nowPage);
    //   let number = Math.ceil(this.totalResults/this.nowPage)
    //   console.log(number);
    //   return number
    // },
    pageList() {
      this.allPage = Math.ceil(this.totalResults/this.nowPage)
      console.log(this.allPage);
      let list = [];
      let current = this.current,
        next = this.nextPages; // current 当前页码，next 后续页码
      let length, head;
      if (current > this.advance / 2) {
        head = current - Math.floor(this.advance / 2);
        if (next >= Math.floor(this.advance / 2)) {
          length = this.advance;
        } else {
          length = next + Math.floor(this.advance / 2) + 1;
        }
        console.log("大于", length);
      } else {
        head = 1;
        if (next + current >= this.advance) {
          length = this.advance;
        } else {
          length = next + current;
        }
        console.log("小于", length);
      }
      for (let i = 1; i <= length; i++) {
        list.push(head++);
        
        console.log(list[list.length - 1]);
        if(list[list.length - 1] >= this.allPage) {
          console.log("超出了");
          return list
        }
      }
      console.log("pageList", list)
      return list;
    },
    pageSize() {
      let list = [];
      let sizes = this.pageSizes != null ? this.pageSizes : this.sizeList;
      this.rows = sizes[0];
      for (let i = 0; i < sizes.length; i++) {
        let option = new Object();
        option.value = sizes[i];
        option.label = sizes[i] + " 条/页";
        list.push(option);
      }
      return list;
    },
    currentChange() {
      return {
        current: this.pageClicked,
        sizeCurrent: this.rows,
      };
    },
    flagChange() {
      return this.flag;
    },
  },
  watch: {
    currentChange(res) {
      console.log(res);
      this.$emit("current-change", res.current);
    },
    nowPage(res) {
      console.log(res);
      this.allPage = Math.ceil(this.totalResults/res)
      console.log(this.allPage);
    },
    flagChange(res) {
      this.pageClicked = 1;
    },
  },
  methods: {
    setPage(id) {
      //
      if (this.pageList.indexOf(id) > -1) {
        this.pageClicked = id;
        this.current = id
        console.log(this.current);
        if(this.current === this.allPage) {
          this.nextClick = true
        } else {
          this.nextClick = false
        }
      }
    },
    changeSize(value) {
      console.log(value);
      this.nowPage = value
      this.pageClicked = 1;
      this.current = 1
      this.nextClick = false
      this.$emit("size-change", value)
    },
    setCurrent(value) {
      this.current = value;
    },
  },
};

css:

li {
    list-style: none;
    cursor: pointer;
}
.listOption > li {
  float: left;
  
}
.ivu-page-total {
  margin-right: 30px;
}
.ivu-page-total,
.ivu-page-options {
  float: left;
  font-size: 13px;
}
.ivu-page-options {
  margin-top: -4px;
}
.my_page_item {
  margin: 0 2px !important;
}
.a-size {
  font-size: 13px !important;
}
.ivu-page-item {
  a {
    border: 1px solid #ccc;
    border-left: none;
    display: block;
    color: #48576a;
    width: 32px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding: 0 8px;
  }
  background-color: #fff;
}
.ivu-page-item-active {
  background-color: #20a0ff;
  a {
    color: #fff;
  }
}
.el-icon-arrow-left,
.el-icon-arrow-right {
  display: block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #ccc;
  padding-left: 6px;
}
.span-style {
  margin-top: 4px;
}
.select-style {
  margin-top: -1px;
  margin-left: 3px;
  height: 28px;
  line-height: 28px;
}
.a-disable {
  cursor: not-allowed
}