elementui分页组件的使用

本是古典何须时尚 2021-07-25 12:27 767阅读 0赞

关键点：使用slice函数，其介绍见：[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/Array/slice][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array_slice]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

每页当前显示的内容为：

** Array.slice(当前页码\*每页条数-每页条数，当前页码\*每页条数)**

代码：

<template>
      <div>
        <el-table
          :data="tableData.slice((pageInfo.currentPage-1)*pageInfo.pageSize,pageInfo.currentPage*pageInfo.pageSize)"
        >
          <el-table-column prop="date" label="日期" sortable></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.currentPage"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.pageTotal"
        ></el-pagination>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {
          //分页
          pageInfo: {
            currentPage: 1,
            pageSize: 2,
            pageTotal: 20
          },
          tableData: [
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              date: "2016-05-05",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              date: "2016-05-06",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            }
          ]
        };
      },
      created() {
        this.pageInfo.pageTotal = this.tableData.length;
      },
      mounted() {},
      computed: {},
      methods: {
        handleSizeChange(val) {
          this.pageInfo.pageSize = val;
        },
        handleCurrentChange(val) {
          this.pageInfo.currentPage = val;
        }
      }
    };
    </script>
    
    <style lang="scss">
    </style>

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_Array_slice]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/0c855c5050c142c2abd4df54af67b958.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/76c38f18ea964e92ad90ce561c02655c.png