Vue脚手架+Element UI开发——快速实现表格数据分页（带实例和细节分析）

项目背景：

最近在写一个后台管理系统项目的demo，需要用到element 组件的表格和分页，所以干脆写篇文章，彻底把分页这个功能搞熟，搞透，以后需要用到表格数据分页的效果，直接在这里Ctrl +C/V就行了，OK，直接来吧。

学习目标：

1. 熟练饿了么的el-table和el-pagination组件，并配合使用实现分页。
2. 熟练调整饿了么组件的样式，和尽量避免一些常见的坑。

学习内容——表格分页：

【步骤】
.首先必须满足前置步骤：npm i element-ui –S【这是全局的引入】
在 main.js 中写入以下内容：

  	import Vue from 'vue';
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	import App from './App.vue';
	
	Vue.use(ElementUI);

或者：npm install babel-plugin-component -D【这是局部引入，这里只是提一下，更多细节请移步别人家的博客】

好了，前置步骤完了，就可以做最开心的事情了，那就是粘贴复制，

首先是HTML的表格部分：

		<el-table
              border 加个边框
              :header-cell-style="{
       'background-color': '#fafafa' }" 
              百度的，项目的表头是这个颜色，所以就难得加行内样式去覆盖了
              
              :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
              这一步是最最重要的，实现绑定的表格数据和下面的分页变量相关联，一般都这样写，固定写法吧

              style="width: 100%; min-height: 345px"
              :default-sort="{ prop: 'zb_date', order: 'descending' }"
               配置了一个表格的排序，就按照时间那一列排
            >
            下面就是每一列的表头，共有7列 后两列是操作按钮之类的
              <el-table-column prop="zb_name" label="指标名称">
                <template slot-scope="scope"> 通过这个模板  在里面可以干很多事情，可以自定义内容 加个小图标、甚至引入一个组件
                  <span style