好资源导航 » 文章资讯 » Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2023-09-17 07:56:05 272

2017年底了，总结了这一年多来的前端之路，Vue从入门到放弃，再二进宫，从Vue1.0持续跟踪到Vue2.5。结合公司的一些实际项目，也封装了一些比较实用的组件。

由于现在公司管理平台主要运用ElementUI，索性就结合组件Table和Pagination封装了一个支持页面切换的Table组件，不啰嗦，直接上代码。

2、实现思路

2.1、ElementUI引入(整体引入)

main.js

//ElementUI
importElementfrom'element-ui'
//默认样式
import'element-ui/lib/theme-chalk/index.css'

2.2、开始封装iTable.vue组件(骨架)

由于公司项目都是以i开头，所以，为了区分组件和页面，习惯于组件命名也以i开头。首先把Table、Pagination组件加进来















{{btn.label}}

筛选过滤

表格操作

@import"../../assets/styles/mixins"; .table{ height:100%; .el-pagination{ float:right; margin:20px; } .el-table__header-wrapper,.el-table__fixed-header-wrapper{ thead{ tr{ th{ color:#333333; } } } } .el-table-column--selection.cell{ padding:0; text-align:center; } .el-table__fixed-right{ bottom:0!important; right:6px!important; z-index:1004; } .operate-group{ display:flex; flex-wrap:wrap; .item{ margin-top:4px; margin-bottom:4px; display:block; flex:0050%; } } .filter-data{ top:e("calc((100%-100px)/3)"); background-color:rgba(0,0,0,0.7); } .table-action{ top:e("calc((100%-100px)/2)"); background-color:rgba(0,0,0,0.7); } .fix-right{ position:absolute; right:0; height:100px; color:#ffffff; width:30px; display:block; z-index:1005; writing-mode:vertical-rl; text-align:center; line-height:28px; border-bottom-left-radius:6px; border-top-left-radius:6px; cursor:pointer; } }

总结

以上所述是小编给大家介绍的Vue2.5结合ElementUI之Table和Pagination组件实现分页功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2、实现思路

2.1、ElementUI引入(整体引入)

2.2、开始封装iTable.vue组件(骨架)

2.3、在页面中引用iTable组件，并且给iTable组件传值

随机推荐

Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

2、实现思路

2.1、ElementUI引入(整体引入)

2.2、开始封装iTable.vue组件(骨架)

2.3、在页面中引用iTable组件，并且给iTable组件传值

热门推荐

随机推荐