2022-03-17 备份vue写表格的分页工具代码，方便复制

放在data()里的pagination

pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        showSizeChanger: true,
        pageSizeOptions: ['10','50','100'],
        showTotal: (total) => `共 ${total} 条数`,
        onChange: (current, pageSize) => this.pageChange(current, pageSize),
        onShowSizeChange: (current, pageSize) =>
            this.pageSizeChange(current, pageSize),
      },

放在method方法里的两个方法

pageChange(current, pageSize) {
      this.pagination.current = current;
      this.getDataSource();//调接口的方法
    },
    pageSizeChange(current, pageSize) {
      this.pagination.current = 1;
      this.pagination.pageSize = pageSize;
      this.getDataSource();//调接口的方法
    },

从后端获取数据的方法

getDataSource(){
      this.spinning=true;
      const data={
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
        code:this.code
      };
      queryWithCodeApi(data).then((res)=>{
        this.spinning = false;
        if (res.table && res.table[0]) {
          let table = res.table;
          this.pagination.total = res.total;
          if (
              (this.pagination.current - 1) * this.pagination.pageSize >
              this.pagination.total
          ) {
            this.pagination.current = 1;
            this.queryWithCodeApi();
          }
          this.dataSource = table;
        } else {
          this.pagination.total = 0;
          this.dataSource = [];
        }
      });
    },