基于elementUI的分页表格组件封装
在后台管理系统中，会经常大量的使用表格与分页，以下基于elementUI实现一个简单的table与pagination的封装
-
这里在
pageSize发生变化的时候，会令currentPage为1，即表格跳转到第一页，这里这么做的目的在于：例如当前页为10，当修改pageSize后，由于每页数据量变大，此时最大页数如果小于10，那么会再次触发current-change事件的发生，对到项目中，一般是会进行两次请求，因此这里直接跳转到第一页，那么由于是第1页，就不会触发current-change事件的发生，也就避免了两次请求的问题 -
pageTable.vue
<template>
<div>
<el-table
ref="table"
element-loading-text="Loading"
:data="tableData"
tooltip-effect="dark"
style="width:100%">
<el-table-column
v-if="showSelection"
type="selection"
width="55"
align="center"
></el-table-column>
<el-table-column
v-for="(item,index) in tableLabel"
:width="item.width ? item.width : ''"
:key="index"
:align="item.align ? item.align : 'center'"
:label="item.label"
:prop="item.param"
>
<template slot-scope="scope">
<span v-if="item.render" style="color:#606266">
{
{
item.render(scope.row)}}
</span>
<span v-else style="color:#606266">{
{
scope.row[item.param]}}</span>
</template>
</el-table-column>
<el-table-column
v-if="tableOption.label"
:width="tableOption.width ? tableOption.width : ''"
:label="tableOption.label"
align="center"
class-name="fixed-width"
>
<template slot-scope="scope">
<el-button
v-for="(item,index) in tableOption.options"
:key="index"
:type="item.type ? item.type : 'text'"
:icon="item.icon ? item.icon : ''"
@click="handleButton(item.methods,scope.row)"
size="small"
>
{
{
item.label}}
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="text-align: right;"
:page-sizes="[5, 10, 15, 20]"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pager.currentPage"
:page-size.sync="pager.pageSize"
:hide-on-single-page="true"
layout="total, prev, pager, next, sizes"
:total="pager.total"
></el-pagination>
</div>
</template>
<script>
export default {
data(){
return {
}
},
props:{
tableData:{
// 表格数据
type:Array,
default: () => {
return []
}
},
tableLabel:{
// label信息
type:Array,
default: () => {
return []
}
},
tableOption:{
// 操作数据
type:Object,
default: () => {
return {
}
}
},
showSelection:{
// 是否显示复选框
type: Boolean,
default: false
},
pager:{
// 分页信息
type: Object,
default: function(){
return {
currentPage:1,
pageSize:10,
total:0
}
}
}
},
methods: {
// 触发自定义按钮操作
handleButton(method, row){
this.$emit('handleButton', method, row);
},
// 获取所有的复选框选项
getAllSelections(){
return this.$refs.table.selection;
},
// size发生变化时，令currentPgae为1，并发送自定义事件
handleSizeChange(val) {
this.pager.currentPage = 1;
this.$emit('pagination', val);
},
// currentPage发生变化时，发送自定义事件
handleCurrentChange(val) {
this.$emit('pagination', val);
}
}
}
</script>
组件引用
<PageTable
:tableData="tableData"
:tableLabel="tableLabel"
:tableOption="tableOption"
:pager="pager"
@pagination="loadTable"
@handleButton="tableBtnHandle(arguments)"
></PageTable>
<script>
export default{
data(){
tableData:[], // table数据
tableLabel:[
{
label:'关联类型', param:'type'},
{
label:'本端资产', param:'name'},
{
label:'本端接口', param:'inf'},
{
label:'对端资产', param:'peerName'},
{
label:'对端接口', param:'peerINF'}
], // tableLabel数据
tableOption: {
label: '操作',
options: [
{
label: '编辑', methods: 'editDetail' },
{
label: '删除', methods: 'detailDetail' }
]
},
pager:{
pageSize: 10, // 每页数据量
currentPage: 1, // 分页 当前页
total:0, //列表总数
}
}
}
</script>