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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- elementui的el-popover修改样式不生效的解决(elementui的el-popover修改样式不生效的解决)
- vue elementui侧边栏怎么切换页面(Vue + element实现动态显示后台数据到options的操作方法)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- elementuivue使用技巧(Vue Element前端应用开发之常规Element界面组件)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- vue element 表格上拉加载数据(Vue组件库ElementUI实现表格加载树形数据教程)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- element-ui如何关闭表单验证(ElementUI实现el-form表单重置功能按钮)
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vueelementui表格操作(Vue组件库ElementUI实现表格列表分页效果)
- elementui多个组件怎么使用(ElementUI在实际项目使用步骤详解)
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- vueelementui动态表格(Vue Element前端应用开发之常规的JS处理函数)
- 黄渤泪目 我的痴呆父亲,我内心永远的痛(黄渤泪目我的痴呆父亲)
- 蒜苔和鱿鱼尾巴一起炒,味道特别棒,又脆又嫩,有滋又有味(蒜苔和鱿鱼尾巴一起炒)
- 鱿鱼炒蒜苔不是黑暗料理,这样做清香扑鼻,鲜美脆嫩,开胃又下饭(鱿鱼炒蒜苔不是黑暗料理)
- 蒜苔炒鱿鱼(蒜苔炒鱿鱼)
- 远离 五毛食品 洛阳80后妈妈发明的 飞行棋 成校园爆款 玩具(远离五毛食品)
- 失传的古代飞行棋游戏 六博(失传的古代飞行棋游戏)
热门推荐
- docker容器的三大组件(docker容器下配置jupyter notebook的操作)
- vue怎么实现输入框(vue车牌输入组件使用方法详解)
- html5新增全局属性(HTML5自定义属性的问题分析)
- localstorage可以存多少(解决localstorage存储boolean类型值的小坑)
- ocr公式识别python(初探利用Python进行图文识别OCR)
- 用html5的canvas绘制剪裁图像(Html5 canvas画图白板踩坑)
- mysql8.0详解(MySQL 8.0 的 5 个新特性,太实用了!)
- 用javascript设计五子棋(JavaScript实现网页版五子棋游戏)
- linux怎么设置php代码(linux Cron定时执行带参数的PHP代码)
- python发送微信消息脚本(python实现给微信指定好友定时发送消息)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9