Vue实战篇十三：实战分页组件

系列文章目录

Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件

文章目录

---

一、背景

• 通过接口查询大量数据数据时，前后端都需考虑分页查询：

1. 后端可通过JPA或Mybatis分页接口实现；
2. 前端可通过分页组件进行实现。

• 本文将通过Element 分页组件进行实战。

二、Element Pagination 分页组件

• 分页效果

<el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination>

三、实战项目

• 前端页面

<template>
  <div class="app-container">
    
    <!--表格渲染-->
    <el-table v-loading="loading" :data="orders"style="width: 100%;margin-top: -10px;">
      <el-table-column prop="orderNo" label="采购单号" />
      <el-table-column :show-overflow-tooltip="true" prop="orderDate" label="下单日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.orderDate,'{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="materialCode" label="物料编码" />
      <el-table-column :show-overflow-tooltip="true" prop="materialName" label="物料名称" />
      <el-table-column :show-overflow-tooltip="true" prop="materialModel" label="型号" />
      <el-table-column :show-overflow-tooltip="true" prop="materialStd" label="规格" />
      <el-table-column :show-overflow-tooltip="true" prop="qty" label="数量" />
      <el-table-column :show-overflow-tooltip="true" width="50px" prop="currency" label="币别" />
      <el-table-column :show-overflow-tooltip="true" width="100px" prop="price" label="单价" />
      <el-table-column :show-overflow-tooltip="true" width="100px" prop="amount" label="金额" />

    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      :page-size="size"style="margin-top:8px;"
      layout="total, prev, pager, next"
      @size-change="sizeChange"
      @current-change="pageChange"
    />
  </div>
</template>

<script>// 前端访问后端接口
import { init } from '@/api/data'
import { parseTime } from '@/utils/index'
export default {
  props: {
    username: {
      type: String,
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      title: '采购订单',
      orders: [],
     // 页码
      page: 0,
      // 每页数据条数
      size: 10,
      // 总数据条数
      total: 0,
      // 等待时间
      time: 50
      ]
    }
  },
  created() {
    this.doInit()
  },
  methods: {
    parseTime,
    doInit(){
      this.loading = true
      init('api/srm/supplierOrder/username/' + this.username, { page: this.page, size: this.size, sort: 'id,desc', username: username }).then(data => {
        this.total = data.totalElements
        this.orders = data.content
        // time 毫秒后显示表格
          setTimeout(() => {
            this.loading = false
          }, this.time)
      }).catch(err =>{
         this.loading = false
       })
    }
     // 改变页码
    pageChange(e) {
      this.page = e - 1
      this.doInit()
    },
    // 改变每页显示数
    sizeChange(e) {
      this.page = 0
      this.size = e
      this.doInit()
    }
  }
    
}</script>