vue的分页组件

//1.如果给current-page，page-size，total绑定了.sync可以直接调用获取接口
          <el-pagination
            background
            :current-page.sync="params.page"
            //total，全部显示可以把总条数放到数组中
            :page-sizes="[3, 5, 10,total]"
            :page-size.sync="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="GetSysUser()"
            @current-change="GetSysUser()"
            @prev-click="GetSysUser()"
            @next-click="GetSysUser()"
          />

<script>
export default {
  data() {
    return {
      params: {
        page: 1,
        size: 3
      },
      total: 0
    }
  },
  created() {
  //获取数据
    this.GetSysUser()
  },
  methods: {
    //调用接口获取渲染数据
    async GetSysUser() {
      const { data: res } = await GetSysUserAPI(this.params)
      this.list = res.rows
      this.total = res.total
    },
  }
}
</script>

//2.点击事件
 <el-pagination
            background
            :current-page="params.page"
            :page-sizes="[3, 5, 10,total]"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="paramsChange($event,0)"
            @current-change="paramsChange($event,1)"
            @prev-click="paramsChange($event,2)"
            @next-click="paramsChange($event,3)"
          />
<script>
export default {
  data() {
    return {
      params: {
        page: 1,
        size: 3
      },
      total: 0
    }
  },
  created() {
  //获取数据
    this.GetSysUser()
  },  
 methods: {
    //调用接口获取渲染数据
    async GetSysUser() {
      const { data: res } = await GetSysUserAPI(this.params)
      this.list = res.rows
      this.total = res.total
    },
    paramsChange(e,val){
    //e是你点击的页码/每页显示的数据，val是你点击的是哪个，你也可以设四个事件，我这边用一个事件来举例
     if(val===0){
     this.params.size=e
     }else {
     this.params.page=e
     }
     this.GetSysUser()
}
  }
}
</script>

//显示最新数据
 watch: {
  //监听总条数的变化
    total(newval, oldval) {
    //如果你的数据是添加/删除到最后你可以通过这段代码找到你添加的数据的位置
      //如果新值大于旧值就是添加，反之则是删除，
      //旧值不等于0是因为在刚开始获取的时候data中total: 0，可以排除获取数据
      //总条数模当前每页条数没有剩余就是跳转到最后一页，有剩余就跳转到最后一页+1
      //删除的时候总条数模当前每页条数没有剩余就跳转到最后一页-1
      总条数模当前每页条数有剩余就是跳转到最后一页就不动
      //给分页组件加一个ref=“”，internalPageCount就是总页数
      //this.$refs.pagination.internalPageCount就可以获取总页数
      //最后再从新渲染数据
      
    //简化版
      newval > oldval && oldval !== 0 ? (newval % this.params.pagesize !== 0 ? this.params.page = this.$refs.pagination.internalPageCount + 1 : this.params.page = this.$refs.pagination.internalPageCount) : (newval % this.params.pagesize === 0 ? this.params.page = this.$refs.pagination.internalPageCount - 1 : this.params.page = this.$refs.pagination.internalPageCount)
      this.GetSysRole()
      //简化之前
      // if (newval > oldval && oldval !== 0) {
      //   newval % this.params.pagesize !== 0 ? this.params.page = this.$refs.pagination.internalPageCount + 1 : this.params.page = this.$refs.pagination.internalPageCount
      //   this.GetSysRole()
      // } else if (newval < oldval && oldval !== 0) {
      //   newval % this.params.pagesize === 0 ? this.params.page = this.$refs.pagination.internalPageCount - 1 : this.params.page = this.$refs.pagination.internalPageCount
      //   this.GetSysRole()
      // }
    }
  }