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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- elementui多个组件怎么使用(ElementUI在实际项目使用步骤详解)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- elementui的el-popover修改样式不生效的解决(elementui的el-popover修改样式不生效的解决)
- vue按需引入elementui组件(vue ElementUI实现异步加载树)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- elementui自定义坐标(element-ui 上传图片后标注坐标点)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)
- 东南亚安全吗(好不好挣钱)
热门推荐
- mysql程序中判断select返回空值(解决MySQL读写分离导致insert后select不到数据的问题)
- 如何注册asp.net 4.0 到iis
- dockercompose的常用命令的作用(PIP安装docker-compose超时问题解决方案)
- js如何实现定时器功能(js实现0ms延时定时器的几种方式)
- 阿里ecs云服务器新手上路(如何迁移阿里云服务器ECS实例中的网站?)
- css修饰文本的方法(CSS常用文本样式总结)
- js项目经验(JS实现扫雷项目总结)
- .NET开发中应该遵循的几个规则
- css背景的属性有哪些(简述CSS中的背景属性background)
- 宝塔面板如何通过ip访问网站(宝塔面板301重定向使用教程)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9