vue iview Table 表格实现分页效果

<template>
  <div class="table">
    <Table
      :columns="columns"
      :data="pageData"
      :border="true"
    >
      <Page
        :total="progressData.length"
        :current="page"
        :page-size="30"
        show-total
        @on-change="handlerPage"
        slot="footer"
        style="text-align: right"
      />
    </Table>
  </div>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      columns: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    {
                        title: 'Age',
                        key: 'age'
                    },
                    {
                        title: 'Address',
                        key: 'address'
                    }
                ],
      progressData: [],//调用接口获取数据，也可以是自己编写的数据
      pageData: [],//表格数据（随着分页而变化）
      page: 1//默认为第一页
    };
  },
  computed: {
  },
  methods: {
    loadData() {
       this.progressData = [];
       //接口参数
      let params = {};
      //接口
      tableData(params).then(({ result }) => {
        this.progressData = result;
        if (this.page) {
          this.pageData = this.progressData.slice(0, 30);
        } else {
          this.changeData();
        }
      });
    },
    //改变页码时的方法
    handlerPage(page) {
      this.changeData(page);
    },
    //修改数据
    changeData(page) {
      this.page = page;
      if (this.progressData.length > 30) {
        this.pageData = this.progressData.slice((page - 1) * 30, page * 30);
      } else {
        this.pageData = this.progressData;
      }
    }
  },
  created() {},
  mounted() {
    this.loadData();
  }
};
</script>

<style>
</style>

扩展

slice()
用来分割数组，但是不会改变数组本来数据

const list=[]//数组数据
//获取list数组中前30个数据
const sliceList=list.slice(0,30)