ElementUI实现表格列表分页效果教程,供大家参考,具体内容如下
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型
<el-pagination>加上@size-change="handleSizeChange、@current-change="handleCurrentChange"处理当前页和当前页数的改变事件
<!--表格--> <div class="formTable" id="formTable"> <el-table ref="Table" :data="apprItemData" :header-cell-style="headClass" row-key="approveItem" :tree-props="{children: 'children'}" height="420" border> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="序号" width="60" align="center"> <template slot-scope="scope">{{scope.$index+1}}</template> </el-table-column> <el-table-column prop="itemCode" label="编码"> </el-table-column> <el-table-column prop="approveName" label="事项名称"> </el-table-column> </el-table> </div> <!--表格分页--> <div class="pagination"> <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5,10, 15, 20, 25]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRow"> </el-pagination> </div>
<script type="text/babel"> var vm = new Vue({ el: '#app', data:{ apprItemData : [], currentPage: 1, //当前页 totalRow: 0, //总页数 pageSize: 10 //当前显示条数 }, computed: {}, watch: {}, created() {}, mounted() { this.loadItemData(); }, methods: { // 加载信息 loadItemData () { var pageSize = this.pageSize; var currentPage = this.currentPage; console.log("pageSize:"+pageSize+",currentPage:"+currentPage); //debugger; var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage; $.ajax({ type: 'get', url:geturl, contentType: "application/json; charset=utf-8", success: function(data) { //debugger; console.log("totalRow:"+data.total); vm.apprItemData = data.rows; vm.totalRow = Number(data.total); }, error: function(e) { console.log("加载数据出现错误:",e); } }) } // 表头样式设置 headClass() { return 'text-align: center;background:#F7F7F7;color:#1C1C1D;' }, //页数变换 handleSizeChange(val) { this.pageSize = val; this.loadItemData(); }, //当前页变换 handleCurrentChange(val) { this.currentPage = val; this.loadItemData(); } } }); </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- Vue form 表单提交+ajax异步请求+分页效果
- Vue.js实现分页查询功能
- 用Vue写一个分页器的示例代码
- Vue.js实现无限加载与分页功能开发
- vue.js表格分页示例
- VUE+SpringBoot实现分页功能
- Vue中ElementUI分页组件Pagination的使用方法
- vue项目实现分页效果
- vue+iview实现分页及查询功能
- vue+iview分页组件的封装
- vue实现分页功能
本文由 华域联盟 原创撰写:华域联盟 » Vue组件库ElementUI实现表格列表分页效果
转载请保留出处和原文链接:https://www.cnhackhy.com/69459.htm