vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
类别:编程学习 浏览量:781
时间:2022-01-23 02:02:52 vueelementui表格操作
Vue组件库ElementUI实现表格列表分页效果ElementUI实现表格列表分页效果教程,供大家参考,具体内容如下
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型
<el-pagination>加上@size-change="handleSizeChange、@current-change="handleCurrentChange"处理当前页和当前页数的改变事件
<!--表格--> <li 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> </li> <!--表格分页--> <li 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> </li>
<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 elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- elementui自定义坐标(element-ui 上传图片后标注坐标点)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- elementui的el-popover修改样式不生效的解决(elementui的el-popover修改样式不生效的解决)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
- 菲律宾潜水(菲律宾潜水价格)
- 泰国人妖(变性手术生殖器要割掉吗)
- 泰国美女(泰国人妖和女性如何区分)
- 泰国旅游业怎么样(泰国的旅游产业)
热门推荐
- 个人如何选择阿里云服务器(个人如何选择阿里云服务器的配置)
- iisweb服务器的启动与配置(win7 iis配置怎么配置 Win7配置IIS服务器图文教程)
- 云服务器租用应该注意哪些事项(云服务器托管需要注意的细节)
- mysql的复制原理(浅析MySQL的WriteSet并行复制)
- dedecms搜索功能的实现(让DEDECMS自动内链起来的实现方法)
- 小程序推荐ui库(AmazeUI 列表的实现示例)
- 数据库创建索引的注意事项
- css3边框讲解(详解css3 object-fit属性)
- python编写小程序实现密码验证(python实现扫描ip地址的小程序)
- 菲律宾云服务器价格(菲律宾云服务器适合用来做什么?)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9