vue，element中表格和分页的组合使用

html 部分

表格 el-talbe 组件

<template>
   	<el-table :data="tableData"
        style="width: 100%">
        <el-table-column type="index"
            label="序号"
            width="70">
            <template slot-scope="scope">
                <span>{{scope.$index+1+pageSize*(currentPage-1)}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name"
            label="名称"></el-table-column>
        <el-table-column prop="type"
            fixed="right"
            label="操作">
            <template slot-scope="scope">
                <div @click="handleUpdate(scope.$index, scope.row)"
                    class="edit"></div>
                <div @click="handleDelete(scope.$index, scope.row)"
                    class="del"></div>
            </template>
        </el-table-column>
    </el-table>
</template>

el-table标签

<el-table :data="tableData">  tableData 是一个数组，里面每一项都是后端返回的一条数据

分页 el-pagination 组件

<el-pagination layout="prev, pager, next, jumper, sizes"
    :current-page="currentPage"
    :page-sizes="[10,15, 20, 50]"
    :page-size="pageSize"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :total="tableDataTotal"></el-pagination>

js 部分

export default {
	data: function () {
	    return {
	        pageSize: 10,// 当前页面的条数
	        currentPage: 1,  // 当前是第几页      
	    };
	},
	methods: {
		// 条数改变
	    handleSizeChange(val) {
            this.pageSize = val;
            this.refreshPage();
        },
        //页码改变
        handleCurrentChange(val) {
            this.currentPage = val;
            this.refreshPage();
        },
        // 请求刷新表格数据
        refreshPage() {
            let obj = {
                current: this.currentPage,
                size: this.pageSize
            };
            //这个是请求页面数据的函数，具体使用根据实际项目中来
            this.loadTableData(obj);
        },
        handleUpdate() {
			// 编辑操作，操作成功后调用 refreshPage 刷新数据
			this.refreshPage();
		},
		handleDelete() {
			// 删除操作
			// 删除成功后不能立即调用 refreshPage。需要判断当前的页码和条数，再请求。			
			this.currentPage = pageSizeFilter(this.tableDataTotal,this.pageSize,this.currentPage);
			// 上面代码的目的。 当分页10条/页，实际数据有11条，页面页码可以显示第二页。
			//页面切换到第二页上，这时候页面只又第11条数据。点击删除，别去在请求后没有上面的方法修改页码。页面上会出现空白的列表。并且选中的页码选中的是第一页。
			// 加上后就不会出现该情况。
			// 删除成功，重新请求页面刷新数据。
			this.refreshPage();
		},
		/*
		 * listTotal 当前数据总条数
		 * pageSize 当前页面条数
		 * currentPage 当前页码
		 */ 
		pageSizeFilter(listTotal, pageSize, currentPage) {
		    let totalPage = Math.ceil((listTotal - 1) / pageSize);
		    let currentP = currentPage > totalPage ? totalPage : currentPage;
		    currentPage = currentP < 1 ? 1 : currentP;
		    return currentPage
		}
	},
	mounted() {
		// 页面加载的时候请求一次数据，
		this.refreshPage()
	}
}

上述代码中要注意的

上面的代码都是部分代码，需要根据实际情况进行修改

1. 表格中的 type=“index” 这一列，需要填写template 中的内容。如果不加，第一页是正常显示前10条，但是到第二页的时候，页面的显示条数还是1-10。
2. handleDelete 删除的方法中，需要判断数据总条数、页码、页面可展示条数之间的关系。
3. tableData 和 tableDataTotal 。 都是请求后后台返回的。后台的返回的数据中，必须包含 tableData 当前页面展示的部分数据；tableDataTotal 当前页面所有数据的总数目，这个并不是tableData.length 获取到的。
4. tableData 和 tableDataTotal 。根据实际情况，可以使用vuex 或者是直接的方式获取。