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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- elementui自定义坐标(element-ui 上传图片后标注坐标点)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue加element ui弹窗(Vue中ElementUI分页组件Pagination的使用方法)
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
- 追连续剧,品古今联4 明代三杨,联妙诗佳(追连续剧品古今联4)
- 三杨 共辅四朝帝王,构建明帝国内阁行政圈(三杨共辅四朝帝王)
- 红色文化进国企(红色文化进国企)
- 车友的选择| 轮毂该如何选(车友的选择轮毂该如何选)
热门推荐
- apache访问提示404(Apache跨域资源访问报错问题解决方案)
- 面试时如何谈自己的优点
- sqlserver 创建数据库链接(SqlServer数据库远程连接案例教程)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- nginx配置https转发规则(Nginx配置https原理及实现过程详解)
- laravel框架运行找不到视图(解决laravel资源加载路径设置的问题)
- 云服务器的五大特征(云服务器可以分为哪些类别?)
- 阿里云的补丁更新应该怎么打(阿里云安骑士企业版有什么作用?)
- 小鸟云服务器免流搭建(小鸟云服务器如何进行数据盘挂载?Windows)
- 浏览器为什么有跨域机制(详解window.open被浏览器拦截的解决方案)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9