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

 <!-- 引入样式 -->

    
 <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>
    
    
    
    
    html

    <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
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-12/qjz2fsl6ycPDmxYWvuQaRnLIHBFX.png)

 <!-- 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>
    
    
    
    
    html

 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')
    
    
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-12/AgW8hj9HsknxSTDLdm6EYcta0Rqy.png)