本文共 2841 字，大约阅读时间需要 9 分钟。

• 使用组件分页
• 自己写分页

一、组件分页

data（）{   return{      tableData: [],        total: 0,//总数        pageNum: 1,//当前页        pageSize: 15,//每页显示数量}}  mounted: function () {         this.query();//加载页面时，获取数据    },    methods:{          //切换页码        changePageNum: function (val) {           this.pageNum = val;        this.query();      },      //通过接口，获取数据    query: function () {           var data = {             name: this.name || '',          fleetId: this.FleetId,          pageNum: this.pageNum,//当前页          pageSize: this.pageSize//查询个数        };        RoleManage.getRole(data)        .then(res => {             var data = res;          if (res.success) {               this.tableData = data.obj.list;            this.total = data.obj.total;            this.name ='';          } else {               this.$message('查询失败');          }        }).catch(err => {             // 异常情况          console.log(err);        });      },         }

组件分页效果

二、自己构建分页

有些时候需要根据需求自己写分页

1. 分页样式
   
2. 上下切页

//调度-系统通讯录分页        dispatchCourentPage: 1,        //调度-系统通讯录当前选中标签标记        dispatchCourentIndex: 1,        //调度-系统通讯录更多标记项:组id        dispatchMorecommandGroupId: '',        dispatchTotlePage: 0,//上页 handleLastPage() {           if (this.dispatchCourentPage === 1) return;        this.dispatchCourentPage -= 1;        let index = this.dispatchCourentIndex;        if (this.dispatchMorecommandGroupId != '') {             this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);        } else {             this.queryBookmember(index);        }      },//下页 handleNextPage() {      if (this.dispatchCourentPage === this.dispatchTotlePage) return;   this.dispatchCourentPage += 1;   let index = this.dispatchCourentIndex;   if (this.dispatchMorecommandGroupId != '') {        this.queryBookMoreBygroupId(this.dispatchMorecommandGroupId);   } else {        this.queryBookmember(index);   } } ,

三、使用监听属性控制分页显示

computed: {         limitData() {           let data = [...this.table1Datas];        return data;      },            // 因为要动态计算总页数，所以还需要一个计算属性来返回最终给 Table 的 data      dataWithPage() {           const data = this.limitData;        const start = this.current * this.size - this.size;        const end = start + this.size;        return [...data].slice(start, end);      },  }

四、js控制分页，计算总页数

1. 方法一

/**        *根据数据条数与每页多少条数据计算页数         * totalnum 数据条数        * limit 每页多少条        */      pageCount(totalnum, limit) {           return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit)            ? (parseInt(totalnum / limit) + 1)            : (totalnum / limit))) : 0;      },

2. 方法2

/**         * 分页的总页数算法         * 总记录数：totalRecord         * 每页最大记录数：maxResult         */        function pageCount() {             totalPage = (totalRecord + maxResult -1) / maxResult;        }

3. 方法3推荐

totalPage  = Math.floor((totalRecord  +maxResult -1) /maxResult );