Vue + ElementUI实现动态获取表格数据并分页

首先，引用必需的js和css文件，这里我已经下载到本地了，你们改成自己的地址就行。

<!-- 引入样式 -->
<link rel="stylesheet" href="vue/css/index.css">
<script src="vue/js/vue.js"></script>
<!-- 引入组件库 -->
<script src="vue/js/index.js"></script>
<!-- 发送请求获取表格数据 -->
<script src="vue/js/vue-resource.min.js"></script>

打开ElementUI的官网找到table，查看后发现table由上面部分的html代码和下面的js代码构成，
html代码负责展示数据，js负责提供数据和定义一些方法，只不过这里的js换成了vue实例，然
后表格的html代码也要放到对应的vue实例中。

<div id="app"></div>

引入表格的html代码：

<!-- 表格 -->
<!-- tableData是vue实例中返回的data中的对象，作为表格数据源 -->
	<el-table :data="tableData" stripe style="width: 100%">
        <!-- prop为tableData对象中的属性名 -->
        <el-table-column v-if="false" align="center" label="id" prop="id">
        </el-table-column>
		<el-table-column align="center" label="列名1" prop="param1"></el-table-column>
		<el-table-column align="center" label="列名2" prop="param2"></el-table-column>
		<el-table-column align="center">
		   <template slot-scope="scope">
           <!-- handleEdit和handleDelete两个函数需要在vue实例的method中定义 -->
		   <el-button icon="el-icon-edit" size="mini" type="primary" 
                      @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		   <el-button icon="el-icon-delete" size="mini" type="danger" 
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		   </template>
		</el-table-column>
	</el-table>

接下来引入分页的html代码：

<!-- handleSizeChange同上面一样，
     需要在method中定义:total后面的参数是通过请求获取到的vue实例的data -->
<div class="block" align="center">
     <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                    :current-page="1" :page-sizes="[10, 20, 30, 40]" :page-size="10" 
                    layout="total, sizes, prev, pager, next, jumper" :total="dataTotal">
     </el-pagination>
</div>

js部分:

var tableData = [];
var currentPage = 1;
var pageSize = 10;
var dataTotal = 0;
var Main = {
    data() {
        //向后端发起请求获取表格数据和total用来展示和分页
    	this.$http.get('xxxx/getInfoByPage.do?currentPage=' + currentPage + '&pageSize=' 
        + pageSize).then(function(res){
            var info = JSON.parse(res.bodyText);
            //给定义的变量赋值
            this.tableData = info.pageInfo;
        });
    	this.$http.get('xxxxx/getDataTotal.do').then(function(res){
            var mes = JSON.parse(res.bodyText);
            this.dataTotal = userMes.total;
        });
      return {
          //vue实例的data，提供给前端页面进行分页展示
    	  tableData : tableData,
    	  dataTotal : dataTotal,
          formLabelWidth: '120px'
      }
    },
    methods: {
      handleDelete(index, row) {
    	  this.$confirm('你确定要删除该条数据吗', '提示').then(() => {
    		  this.$http.post('xxxxx/delData.do?delId=' + row.id).then(function(res){
        		  <!-- 请求成功后的函数体 -->
              });
          });
      },
      handleSizeChange(val) {
    	  pageSize = val;
    	  this.$http.get('xxxxx/xxxx.do?currentPage=' + currentPage + '&pageSize=' + pageSize).then(function(res){
              <!-- 省略 -->
          });
      },
        handleCurrentChange(val) {
    	   <!-- 省略 -->
      }
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

建议仔细阅读ElementUI官网相应说明，有什么不对的或者需要改进的地方，敬请指正