element table实现前端分页

前端对于，表格数据做分页，可以通过数组slice,进行处理，将数组分成我们想要的条数。

slice() 方法可从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

slice()案例：

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 结果输出:

Orange,Lemon

效果图，如下：

详细解析，可以看代码中的注释。 

代码html部分： 

        <div class="main-table">
            <el-table
                :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                style="width: 100%">
     
                <el-table-column
                    prop="name"
                    label="政策名称"
                    width="850">
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="政策类别"
                    >
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="发布时间"
                    >
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="main-page">
         
            <el-pagination
                @current-change="handleCurrentChange"
                background
                layout="prev, next" 
                :page-size="pagesize"
                :total="totalNum">
            </el-pagination>
            <!-- layout="prev, next" 表示只展示上一页和下一页的部分 -->
             <!-- :page-size设置每页有多少条数据 -->
              <!-- :total="totalNum" 表示总的条数 -->
              <!-- current-change当前页发生改变时触发 -->
        </div>

 js部分：

    data(){
        return{
            currentPage:1, // 当前的页数
            pagesize:8, //每页的条数
            totalNum:0, // 多少条数据
            tableData: [{
                date: "2016-05-02",
                name: "王小虎",
                type: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1518 弄",
                zip: 200333
            }, {
                date: "2016-05-04",
                name: "王小虎",
                type: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1517 弄",
                zip: 200333
            }, {
                date: "2016-05-01",
                name: "王小虎",
                type: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1519 弄",
                zip: 200333
            }, {
                date: "2016-05-03",
                name: "王小虎",
                type: "上海",
                city: "普陀区",
                address: "上海市普陀区金沙江路 1516 弄",
                zip: 200333
            }]
        };
    },
    mounted(){
        console.log(this.$route);
        this.totalNum = this.tableData.length; // 总的条数，用于展示共多少条，以及控制上一页和下一页的
        document.querySelector(".btn-prev").innerHTML = "上一页"; // 更改上一页展示内容
        document.querySelector(".btn-next").innerHTML = "下一页"; // 更改下一页展示内容
    },
    methods:{

        handleCurrentChange(val) {
            console.log(val, "456456");
            this.currentPage = val;
        },
    },