VUE+Axios+ElementUI 分页请求第一页首页展现数据个数比后一页的少一项。limit、offset分页请求

因为设计图就是列表第一项占了位为添加按钮，如图：

从第二页开始就没有这个添加项了。原本的思路是第一页设置请求的limit是3，换页时，当前页不是第一页时请求的limit设为4，就可以实现效果。
初始代码：

<div class="fenye">
        <el-pagination
          background
          :current-page="taskDataQuery.currentpage"
          :page-size="taskDataQuery.limit"
          layout="prev, pager, next, jumper"
          :total="taskDataQuery.total"
          @current-change="handleCurrentChange"
        />
      </div>

export default {
 
  data() {
    return {
      taskDataQuery: {
        // 分页
        currentpage: 1,
        total: 0,
        offset: 0,
        limit: 3,
        // params
        sort: "create_time",
        orderby: "desc",
        //  state: "1",
        column_data: "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,25,26,27",
      },
    }
  },
  methods:{
    handleCurrentChange(val) {
      this.showlist = false
      let limit = this.taskDataQuery.limit
      this.taskDataQuery.offset = val * limit - limit
      this.taskDataQuery.currentpage = val
      if (val != 1) {
        this.taskDataQuery.limit = 4
      } else {
        this.taskDataQuery.limit = 3
      }
      //发送获取数据的请求
      this.getColitem()
      // console.log(`handleCurrentChange当前页: ${val}`)
    },
  },

但是当数据总量total到了8个的时候，问题就出来了。
首先看elementUI的文档可知：

elementUI的分页是根据total（总条目数）和page-sizes（每页显示个数选择器的选项设置）帮我们计算有有多少页的。

当total=8，（page-size）limit=3时，如上图效果，分成了三页。
但跳转到第二页时，就会出现只分成了两页，如图：

原因是因为limit和page-size绑定了，当limit=4，total=8，当然是分成了两页。

解决办法

固定limit=4，第一页虽然获取到了四项数据但是在显示时只显示三项。这样一来，本应在第二页时获取的数据在第一页获取却不显示，所以对offset进行修改。

export default {
 
  data() {
    return {
      taskDataQuery: {
        // 分页
        currentpage: 1,
        total: 0,
        offset: 0,
        limit: 4,
        // params
        sort: "create_time",
        orderby: "desc",
        //  state: "1",
        column_data: "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,25,26,27",
      },
    }
  },
  methods:{
   handleCurrentChange(val) {
      this.showlist = false
      let limit = this.taskDataQuery.limit
      this.taskDataQuery.offset = `${
        val != 1 ? val * limit - limit - 1 : val * limit - limit
      }`
      this.taskDataQuery.currentpage = val
      this.getColitem()
      console.log(this.taskDataQuery)
      // console.log(`handleCurrentChange当前页: ${val}`)
    },
  },