iView分页表格封装

 分页：https://www.iviewui.com/components/page

表格：https://www.iviewui.com/components/table

<template>
  <div>
    <Table ref="table" v-if="!refresh" :loading="loading" :data="showData" :columns="columns" stripe :border="border">
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page show-elevator :simple="$isMobile" show-total show-sizer prev-text="上一页" next-text="下一页" :total="total" :current="currentPage"
          @on-change="onPageChange" @on-page-size-change="onPageSizeChange"></Page>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        refresh: false,
        currentPage: 1,
        pageSize: 10
      }
    },
    props: {
      columns: {
        type: Array,
        default: () => []
      },
      data: {
        type: Array,
        default: () => []
      },
      border: {
        type: Boolean,
        default: false
      },
      loading: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      showData: function() {
        var firstIndex = (this.currentPage - 1) * this.pageSize;
        return this.data.slice(firstIndex, firstIndex + this.pageSize);
      },
      total: function() {
        return this.data.length;
      }
    },
    methods: {
      getSelection() {
        return this.$refs.table.getSelection();
      },
      formatDate(date) {
        const y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? '0' + m : m;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d;
      },
      editRow(index, name, value) {
        var targetIndex = (this.currentPage - 1) * this.pageSize + index;
        this.data.forEach(function(currentValue, currentIndex, arr) {
          if (targetIndex == currentIndex) {
            currentValue[name] = value;
          }
        })
      },
      redraw() {
        this.refresh = true
        this.$nextTick(() => {
          this.refresh = false
        })
      },
      onPageChange(currentPage) {
        this.currentPage = currentPage;
      },
      onPageSizeChange(pageSize) {
        this.pageSize = pageSize;
      }
    }
  }
</script>

<style>
</style>