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中的分頁 里面的數據和接口和調換成你自己的。要不然會報錯的