day36-37（前端分页 uat部署）

uat部署

uat部署，连接vpn
账号密码都是 yhs_xxxx
打开网页
vpn.xxxxxx
账号密码都是 yhs_xxxxx 生产区

88服务器
系统账号 root
路径：usr/share/nginx/html

本科毕业设计（论文）任务书

使用Spring Boot + Mybatis开发仓管销售管理系统

仓库信息管理系统销售管理系统包括销售单管理，待销售订单管理，销售报表统计几个模块；
主要内容包括：

1. 熟悉采用Spring Boot + Mybatis进行销售单管理功能的开发步骤；
2. 熟悉采用Spring Boot + Mybatis进行待销售订单管理的开发步骤；
3. 熟悉采用Echarts进行销售报表统计的开发步骤；

前端分页

由于数据是一次性来的，又临时要求分页，在不改接口的情况下只能使用前端分页，对总数据进行处理展示既可

分页控件

  <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      :current-page="page.currentPage"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
    >
    </el-pagination>
    //行为区
      currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },

将表格中绑定的数据进行如下处理，仅展示部分分页数据。就可以实现前端分页

isdata="listData.slice((currentPage-1)*pageSize,currentPage*pageSize)"

待修改表格：登记页面登记信息，登记页面日志信息
业务办理页面日志信息
办理情况页面
运作时间数据表页面
项目管理页面

分页体验优化： 当数据较少时（少于5条）可隐藏分页控件
，通过设置 hide-on-single-page 属性来隐藏分页。

<div>
 <el-switch v-model="value">
 </el-switch>
 <el-pagination
  :hide-on-single-page="value"
  :total="5"
  layout="prev, pager, next">
</el-pagination>
</div>

<script>
  export default {
    data() {
      return {
        value: false
      }
    }
  }
</script>

标签：分页,pageSize,day36,销售,37,uat,Mybatis,currentPage,页面
来源： https://blog.csdn.net/weixin_43514933/article/details/111192630