Vue+Element UI对表格的分页操作

1.表格：

<el-table
                    **:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"** //分页需要对表格进行处理，很重要
                    ref="table"
                    style="width: 100%"
                    highlight-current-row
                    @selection-change='selectRow'>
                <el-table-column type="selection" width="45" align="center"></el-table-column>
                <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>
                <el-table-column
                        label="部门id"
                        prop="id">
                </el-table-column>
                <el-table-column
                        label="部门名称"
                        prop="deptName">
                </el-table-column>
                <el-table-column
                        label="部门负责人"
                        prop="deptLeader">
                </el-table-column>
                <el-table-column
                        label="部门介绍"
                        prop="deptDesc">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编 辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删 除
                        </el-button>
                    </template>
                </el-table-column>
 </el-table>

2.ElementUI中提供的分页：

<el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 15, 20, 30]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total='tableData.length'>
 </el-pagination>

3.对数据进行处理：

 data() {
            return {
                //    分页
                currentPage: 1,
                pagesize: 10,
                total: 25,
                }
         }

4定义方法：

 //    分页
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },