技術標籤：javascriptvue.js

今天用分頁元件的時候遇到了一個小bug，就是當我點選頁數(page)的時候，點選到最後一個的時候，這時如果切換一頁顯示的條數(size),頁面會出現資料渲染不出來的情況。操作如下圖：先點選第7頁，再點選切換條數的下拉選擇器。
自己的一個解決方法就是當用戶切換size數的時候，用監聽器watch，把page重置為1，這樣就可以避免這個問題，如果各位大佬還有更好的解決方案，歡迎留言賜教。O(∩_∩)O哈哈~

下面附上自己做分頁的程式碼，這個分頁介面的話是後端做的，前端只用傳參(size,page)就好

 <el-pagination
        background
 

        style="float: right"
        :current-page="currentPage"
        :page-sizes="[10, 50, 100, 500]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
 

        @current-change="handleCurrentChange"
      />

watch:{
	 size() {
      this.currentPage = 1
      this.init()
    }
},
methods: {
    // 初始化資料
    init() {
      const params = {
        // type: "運輸方式"
        size: this.size,
        page: this.currentPage - 1,   
      }
 

      api.getDataList(params).then((res) => {
        console.log('res', res)
        this.tableData = res.content
        this.total = res.totalElements
        // this.options = res.content;
        // res.content.map((ele) => {
        //   this.options.push(ele.type);
        // });
        // for (let i = 0; i < res.content.length; i++) {
        //   let newArr = res.content[i].type;
        //   this.options.push(newArr);
        // }

        console.log('this.options', this.options)
        console.log('this.tableData', this.tableData)
        console.log('this.codeTypeValue', this.codeTypeValue)
      })
    },
     handleSizeChange(val) {
      console.log(`每頁 ${val} 條`)
      this.size = val
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`當前頁: ${val}`)
      this.currentPage = val
      this.init()
    }
   }