这篇文章主要介绍了vue2.5 结合 element ui 之 table 和 pagination 组件实现分页功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017年底了，总结了这一年多来的前端之路，vue从入门到放弃，再二进宫，从 vue1.0 持续跟踪到 vue2.5。结合公司的一些实际项目，也封装了一些比较实用的组件。
由于现在公司管理平台主要运用element ui，索性就结合组件table 和 pagination 封装了一个支持页面切换的table组件，不啰嗦，直接上代码。
2、实现思路2.1、element ui 引入(整体引入)main.js
// element uiimport element from 'element-ui'// 默认样式import 'element-ui/lib/theme-chalk/index.css'
2.2、开始封装 itable.vue 组件 (骨架)由于公司项目都是以 i 开头，所以，为了区分组件和页面，习惯于组件命名也以 i 开头。 首先把 table 、 pagination 组件加进来
<template> <p class="table"> <!--region 表格--> <el-table id="itable"></el-table> <!--endregion--> <!--region 分页--> <el-pagination></el-pagination> <!--endregion--> </p><template>
养成写注释的好习惯，个人项目的注释量基本上不会低于 30%
2.3、在页面中引用 itable 组件，并且给 itable 组件传值<template> <p class="table-page"> <i-table :list="list" :total="total" :otherheight="otherheight" @handlesizechange="handlesizechange" @handleindexchange="handleindexchange" @handleselectionchange="handleselectionchange" :options="options" :columns="columns" :operates="operates" @handlefilter="handlefilter" @handelaction="handelaction"> </i-table> </p></template><script> import itable from '../../components/table/index' export default { components: {itable}, data () { return { total: 0, // table数据总条数 list: [], // table数据 otherheight: 208, // 除了table表格之外的高度，为了做table表格的高度自适应 page: 1, // 当前页码 limit: 20, // 每页数量 options: { stripe: true, // 是否为斑马纹 table loading: false, // 是否添加表格loading加载动画 highlightcurrentrow: true, // 是否支持当前行高亮显示 mutiselect: true, // 是否支持列表项选中功能 filter: false, // 是否支持数据过滤功能 action: false // 是否支持 表格操作功能 }, // table 的参数 columns: [ { prop: 'id', label: '编号', align: 'center', width: 60 }, { prop: 'title', label: '标题', align: 'center', width: 400, formatter: (row, column, cellvalue) => { return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}</span>` } }, { prop: 'state', label: '状态', align: 'center', width: '160', render: (h, params) => { return h('el-tag', { props: {type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'} // 组件的props }, params.row.state === 0 ? '上架' : params.row.state === 1 ? '下架' : '审核中') } }, …… ], // 需要展示的列 operates: { width: 200, fixed: 'right', list: [ { label: '编辑', type: 'warning', show: true, icon: 'el-icon-edit', plain: true, disabled: true, method: (index, row) => { this.handleedit(index, row) } }, { label: '删除', type: 'danger', icon: 'el-icon-delete', show: true, plain: false, disabled: false, method: (index, row) => { this.handledel(index, row) } } ] } // 列操作按钮 } }, methods: { // 切换每页显示的数量 handlesizechange (size) { this.limit = size console.log(' this.limit:', this.limit) }, // 切换页码 handleindexchange (index) { this.page = index console.log(' this.page:', this.page) }, // 选中行 handleselectionchange (val) { console.log('val:', val) }, // 编辑 handleedit (index, row) { console.log(' index:', index) console.log(' row:', row) }, // 删除 handledel (index, row) { console.log(' index:', index) console.log(' row:', row) } } }</script>
除了 columns 参数和 operates 参数 之外，其它的参数应该还好理解，好的。那我们就详细的解释下这两个参数，那么我们就需要结合组件itable.vue 来讲解了，接下来就给 itable.vue 添加肌肉和血管，代码都贴了。 比较难理解的就是columns里面的 render 参数，使用了vue的虚拟标签，为了就是能够在 table 表格的列中随心所欲的使用各种html标签 和 element ui 的其他组件。（ 你也可以直接写，看看 table 组件是否能识别，呵呵哒！ ）这个估计对于刚入门的小伙伴是一个比较难理解的地方,详细的大家可以先看下vue 的render，解释的更清楚,如果有的小伙伴不理解，可以直接私信我~~~
<!--region 封装的分页 table--><template> <p class="table"> <el-table id="itable" v-loading.itable="options.loading" :data="list" :max-height="height" :stripe="options.stripe" ref="mutipletable" @selection-change="handleselectionchange"> <!--region 选择框--> <el-table-column v-if="options.mutiselect" type="selection" style="width: 55px;"> </el-table-column> <!--endregion--> <!--region 数据列--> <template v-for="(column, index) in columns"> <el-table-column :prop="column.prop" :label="column.label" :align="column.align" :width="column.width"> <template slot-scope="scope"> <template v-if="!column.render"> <template v-if="column.formatter"> <span v-html="column.formatter(scope.row, column)"></span> </template> <template v-else> <span>{{scope.row[column.prop]}}</span> </template> </template> <template v-else> <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index"></expand-dom> </template> </template> </el-table-column> </template> <!--endregion--> <!--region 按钮操作组--> <el-table-column ref="fixedcolumn" label="操作" align="center" :width="operates.width" :fixed="operates.fixed" v-if="operates.list.filter(_x=>_x.show === true).length > 0"> <template slot-scope="scope"> <p class="operate-group"> <template v-for="(btn, key) in operates.list"> <p class="item" v-if="btn.show"> <el-button :type="btn.type" size="mini" :icon="btn.icon" :disabled="btn.disabled" :plain="btn.plain" @click.native.prevent="btn.method(key,scope.row)">{{ btn.label }} </el-button> </p> </template> </p> </template> </el-table-column> <!--endregion--> </el-table> <p style="height:12px"></p> <!--region 分页--> <el-pagination @size-change="handlesizechange" @current-change="handleindexchange" :page-size="pagesize" :page-sizes="[10, 20, 50]" :current-page="pageindex" layout="total,sizes, prev, pager, next,jumper" :total="total"></el-pagination> <!--endregion--> <!--region 数据筛选--> <p class="filter-data fix-right" v-show="options.filter" @click="showfilterdatadialog"> <span>筛选过滤</span> </p> <!--endregion--> <!--region 表格操作--> <p class="table-action fix-right" v-show="options.action" @click="showactiontabledialog"> <span>表格操作</span> </p> <!--endregion--> </p></template><!--endregion--><script> export default { props: { list: { type: array, default: [] }, // 数据列表 columns: { type: array, default: [] }, // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽 operates: { type: array, default: [] }, // 操作按钮组 === label: 文本，type :类型（primary / success / warning / danger / info / text），show：是否显示，icon：按钮图标，plain：是否朴素按钮，disabled：是否禁用，method：回调方法 total: { type: number, default: 0 }, // 总数 pagesize: { type: number, default: 20 }, // 每页显示的数量 otherheight: { type: number, default: 160 }, // 用来计算表格的高度 options: { type: object, default: { stripe: false, // 是否为斑马纹 table highlightcurrentrow: false // 是否要高亮当前行 }, filter: false, action: false } // table 表格的控制参数 }, components: { expanddom: { functional: true, props: { row: object, render: function, index: number, column: { type: object, default: null } }, render: (h, ctx) => { const params = { row: ctx.props.row, index: ctx.props.index } if (ctx.props.column) params.column = ctx.props.column return ctx.props.render(h, params) } } }, data () { return { pageindex: 1, multipleselection: [] // 多行选中 } }, mounted () { }, computed: { height () { return this.$utils.common.getwidthheight().height - this.otherheight } }, methods: { // 切换每页显示的数量 handlesizechange (size) { this.$emit('handlesizechange', size) this.pageindex = 1 }, // 切换页码 handleindexchange (index) { this.$emit('handleindexchange', index) this.pageindex = index }, // 多行选中 handleselectionchange (val) { this.multipleselection = val this.$emit('handleselectionchange', val) }, // 显示 筛选弹窗 showfilterdatadialog () { this.$emit('handlefilter') }, // 显示 表格操作弹窗 showactiontabledialog () { this.$emit('handelaction') } } }</script><style lang="less" rel="stylesheet/less"> @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: 0 0 50%; } } .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; } }</style>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
react native中navigatorios组件（详细教程说明）
有关ejsexcel模板使用方法
在d3.js中如何创建物流地图（详细教程）
以上就是在vue2.5中通过table 和 pagination 组件如何实现分页功能的详细内容。