element ui 实现表格分页

1. 创建表格

 <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
	  	  currentPage: 1, // 当前页码
	   	  total: 0, // 总条数
	      pageSize: 3, // 每页的数据条数
        }
      }
    }
  </script

2. 添加分页导航栏

<el-pagination
	align="center"
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:current-page="currentPage"
	:page-sizes="[3]"
	:page-size="pageSize"
	layout="total, sizes, prev, pager, next, jumper"
	:total="tableData.length">
</el-pagination>

3. 修改表格data属性 控制数据显示形式

这一步保证分页导航栏是控制的是那个表格的数据

:data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"

4. 添加处理分页方法

methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
},

5. 最终版本

 <template>
 	<div>
	 	<el-table
	      :data=" tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
	      style="width: 100%">
	      <el-table-column
	        prop="date"
	        label="日期"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="name"
	        label="姓名"
	        width="180">
	      </el-table-column>
	      <el-table-column
	        prop="address"
	        label="地址">
	      </el-table-column>
	    </el-table>
	    <el-pagination
		align="center"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="currentPage"
		:page-sizes="[3]"
		:page-size="pageSize"
		layout="total, sizes, prev, pager, next, jumper"
		:total="tableData.length">
		</el-pagination>
 	</div>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, 
          {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, 
          {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, 
          {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
	  	  currentPage: 1, // 当前页码
	   	  total: 0, // 总条数
	      pageSize: 3, // 每页的数据条数
        },
        methods: {
			//每页条数改变时触发 选择一页显示多少行
			handleSizeChange(val) {
				//console.log(`每页 ${val} 条`);
				this.currentPage = 1;
				this.pageSize = val;
			},
				//当前页改变时触发 跳转其他页
				handleCurrentChange(val) {
				//console.log(`当前页: ${val}`);
				this.currentPage = val;
				},
			},
		}
	}
  </script