现在做后台系统用vue + elementUI 的越来越多，那element ui的 el-table 组件肯定也离不开。虽然element ui的table组件很好。但是表格和分页是分离的。每次写表格的时候都要写分页。这个就比较麻烦了。那我们可不可以把表格和分页封装在一起呢？照这个思路那我们重新封装一个带分页的表格。
思路：
- 表格组件要包含分页，不用每次都重新写分页
- 尽量保证el-table原生方法
- 方便易用
照这个思路我们开始写代码
先把表格和分页写在一起
<template>
<div>
<!-- 表格数据 -->
<el-table
highlight-current-row //点击当前行高亮
:data="tableDate" //表格数据
border //添加斑马线
:height="tableHeight" //表格高度
v-loading="loading" //loading动画
:size="size" //表格大小
@sort-change = "sortChange" //排序
@selection-change="selectionChange" //多选
@current-change="currentChange"
@row-click = "rowClick" //单行点击
style="width: 100%">
<slot></slot>
</el-table>
<el-pagination
v-if="paging"
@size-change="limitChange"
@current-change="pageChange"
:current-page.sync="params.page"
:page-size="params.limit"
:page-sizes="[10, 15, 20, 30, 50]"
layout="total, sizes, prev, pager, next, jumper"
:total="tableCount">
</el-pagination>
</div>
</template>
<script>
export default {
props: {
//请求接口
api: {
required: true
},
//参数 默认返回分页和条数
params: {
type: [Object,String,Number],
default: function() {
return { page: 1, limit: 15 };
}
},
// 尺寸
size: {
default: 'small'
},
// 分页
paging: {
default: true
}
},
data() {
return {
tableCount: 0, //总条数
tableDate: [], //表格数据
loading: false, //loading动画
};
},
created() {
this.init(this.params);
},
computed: {
// 实时更新server
server:function(){
return this.api.split('.')[0]
},
// 实时更新url
url:function(){
return this.api.split('.')[1]
},
tableHeight:function(){
return this.paging?'calc(100% - 32px)':'100%'
}
},
methods: {
init(params) {
this.loading = true;
//如果采用微服务的方式需要传微服务和url
this.$api[this.server][this.url](params)
.then(res => {
this.tableDate = res.data || [];
// 如果有分页
if(this.paging){
this.tableCount = res.count || 0;
this.params.page = res.curr || 0;
}
})
.finally(() => {
//关闭loading
this.loading = false;
});
},
// 重新请求 //如果需要重新请求使用$refs 调用这个方法
reload() {
// 如果有分页
if(this.paging){
this.params.page = 1;
}
// api动态加载完 开始重新请求数据
this.$nextTick(()=>{
this.init(this.params);
})
},
以下是对el-table原来的方法再次封装emit出去
// 多选
selectionChange(val){
this.$emit('selection-change',val)
},
// 单选
currentChange(currentRow, oldCurrentRow){
this.$emit('current-change',currentRow, oldCurrentRow)
},
rowClick(row, event, column){
this.$emit('row-click',row, event, column)
},
// 排序
sortChange(column, prop, order){
this.$emit('sort-change',column, prop, order)
},
// 表格翻页
pageChange(page) {
this.params.page = page;
this.init(this.params);
},
limitChange(limit){
this.params.limit = limit;
this.init(this.params);
},
}
};
</script>
别人使用起来非常简单 ,也不用再写任何请求方法
可以全局引入
<d-table
api="bizSystemService.getEmployeeList" //微服务名称+接口名称
:params="queryForm" //接口请求的参数. 默认是limit和page
ref="table"
size="small">
//下面的使用方式和el-table一样
<el-table-column
align="center"
label="序号"
width="50">
<template slot-scope="scope">
{{scope.$index+1}}
</template>
</el-table-column>
<el-table-column
prop="roleTypeName"
align="center"
label="角色类型"
width="120">
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</d-table-column>
</el-table>
如果想刷新数据 使用reload方法即可. this.$refs.table.reload()
