element中的分页

在template

<template>
  <div class="Terminal" v-loading="loading">
    <!-- 查询操作 -->
    <div class="select">
      <el-form :label-position="'left'">
        <el-form-item label="所属门店：">
          <el-select v-model="merchantNo" placeholder="请选择" class="city-select">
            <el-option label="全部" value="" />
            <el-option v-for="item in provinceOption" :key="item.key" :label="item.merchantShortName" :value="item.merchantNo" />
          </el-select>
        </el-form-item>
        <el-form-item label="终端编号：">
          <el-input v-model="posDeviceId" />
        </el-form-item>
        <el-button @click="Search">查询</el-button>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="store-table">
      <el-table :data="tableData" style="width: 100%" header-row-class-name="table-title">
        <el-table-column label="终端编号">
          <template slot-scope="scope">
            {{ scope.row.posDeviceId }}
          </template>
        </el-table-column>
        <el-table-column label="品牌型号">
          <template slot-scope="scope">
            {{ scope.row.brand }}
            <!-- <span v-if="scope.row.brand == '01'">百福</span>
            <span v-if="scope.row.brand == '06'">惠尔丰</span> -->
          </template>
        </el-table-column>
        <el-table-column label="所属门店">
          <template slot-scope="scope">
            {{ scope.row.merchantName }}
          </template>
        </el-table-column>
        <el-table-column label="门店类型">
          <template slot-scope="scope">
            <span v-if="scope.row.merchantType == '1'">普通商户</span>
            <span v-if="scope.row.merchantType == '2'">连锁总店</span>
            <span v-if="scope.row.merchantType == '3'">连锁分店独立营业执照</span>
            <span v-if="scope.row.merchantType == '4'">连锁分店无营业执照</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination background layout="prev, pager, next, jumper, sizes" :current-page="startPage" :prev-text="prev" :next-text="next" :page-sizes="pagesizearrray" :page-size="pageSize" :total="totalNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

在script

export default {
  data() {
    return {
      startPage: 1,
      // 每页的数据
      pageSize: 10,
      pagesizearrray: [10, 20, 30, 40],
      totalNum: 0,
      tableData: [],
      prev: this.$t('personal.prev'), // 上一页
      next: this.$t('personal.next'), // 下一页
    }
  },
}

在methods

 methods: {
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange(size) {
      this.pageSize = size
      this.handleUserList()
    },
    handleCurrentChange(startPage) {
      this.startPage = startPage
      this.handleUserList()
    },
    handleUserList() {
　　// 这个是接口的调用
      getpos({
        posDeviceId: '',
        merchantNo: '',
        startPage: this.startPage,
        pageSize: this.pageSize,
        innerMain: 2,
      }).then((res) => {
        // console.log(res, '表格数据')
        if (res.code === '000000') {
          this.loading = false
          if (res.data) {
            this.tableData = res.data.list
　　　　　　//分页处理　　
            this.totalNum = res.data.totalCount
            this.totalCount = res.data.totalCount
          } else {
            this.tableData = []
            this.totalCount = 0
          }
        }
      })
    },

最后在moutend或created中进行调用数据

this.handleUserList()

 

 

注意这是element中的分页 里面的数据和接口和调换成你自己的。要不然会报错的