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

雨点打透心脏的1/2处 2022-03-17 05:56 1196阅读 0赞

首先，引用必需的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实例中。

引入表格的html代码：

<el-table :data="tableData" stripe style="width: 100%">
            
            <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">
               
    		   <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代码：

<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部分:

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

[ElementUI]: http://element-cn.eleme.io/#/zh-CN/