向后台管理一类的系统，基本都是表格，使用el-table时，不是在复制就是再复制的路上。所以咱们把el-table封装起来，这样页面看起来就更加整洁了。
在封装el-table之前先写一个分页器的组件Pagination.vue吧
<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes="pageSizes"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
},
pageSizes: {
type: Array,
default () {
return [10, 20, 30, 50]
}
},
layout: {
type: String,
default: 'total, prev, pager, next, jumper'
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get () {
return this.page
},
set (val) {
this.$emit('update:page', val)
}
},
pageSize: {
get () {
return this.limit
},
set (val) {
this.$emit('update:limit', val)
}
}
},
methods: {
handleSizeChange (val) {
this.$emit('pagination', { page: this.currentPage, limit: val })
},
handleCurrentChange (val) {
this.$emit('pagination', { page: val, limit: this.pageSize })
}
}
}
</script>
<style lang="scss" scoped>
.pagination-container {
background: #fff;
.el-pagination {
text-align: right;
.btn-prev, .btn-next {
color: #FF5F17;
}
span:not([class*=suffix]), button {
color: #000000;
font-size: 12px;
padding: 0;
}
button:hover {
color: #FF5F17;
background: rgba(255, 95, 23, 0.15);
border-radius: 8px;
min-width: 26px;
height: 26px;
margin: 0px 5px;
}
.btn-prev, .btn-next {
padding: 0;
}
.el-input--medium .el-input__inner {
width: 32px;
height: 22px;
border-radius: 6px;
border: 1px solid #FF5F17 !important;
padding: 0 !important;
}
}
.el-pager li {
color: #C4CED7;
}
.el-pager li.active {
color: #FFFFFF;
background-color: #000000;
height: 26px;
min-width: 26px;
min-height: 26px;
line-height: 26px;
cursor: default;
border-radius: 8px;
}
.el-pager li:hover {
color: #FF5F17 ;
}
}
.pagination-container.hidden {
display: none;
}
</style>
然后再创建一个ZtTable.vue。代码如下
<template>
<div class="zt__table">
<el-table :data="tableData" @cell-click="cellClick" :border="border">
<el-table-column
v-if="index"
type="index"
label="序号"
align="center"
width="50">
<template slot-scope="scope">
<span>{
{ scope.$index + (page.current - 1) * page.size + 1 }}</span>
</template>
</el-table-column>
<template v-for="(item, index) in tableOption">
<el-table-column
:key="index"
:prop="item.prop"
:label="item.label"
:align="item.align || 'center'"
:show-overflow-tooltip="item.overHidden || true">
<template slot-scope="scope">
<slot
v-if="item.slot"
:name="scope.column.property"
:row="scope.row"
:$index="scope.$index"
/>
<span v-else>{
{ scope.row[scope.column.property] }}</span>
</template>
</el-table-column>
</template>
<el-table-column
v-if="operation"
label="操作"
align="center">
<template slot-scope="scope">
<slot
name="menu"
:row="scope.row"
:$index="scope.$index"
/>
</template>
</el-table-column>
</el-table>
<Pagination
v-show="page.total>0"
:total="page.total"
:page.sync="page.current"
:limit.sync="page.size"
@pagination="pageChange"
/>
</div>
</template>
<script>
import Pagination from '../Pagination'
export default {
name: 'ZtTable',
components: {
Pagination
},
props: {
index: {
type: Boolean,
default: function () {
return true
}
}, // 是否设置序号，默认设置
border: {
type: Boolean,
default: function () {
return false
}
}, // 是否设置边框，默认不要
operation: {
type: Boolean,
default: function () {
return false
}
}, // 是否有操作列，默认无
tableData: {
type: Array,
default: function () {
return []
}
}, // 列表数据
tableOption: {
type: Array,
default: function () {
return []
}
}, // 表头
page: {
type: Object,
default: function () {
return {
total: 0,
current: 1,
page: 10
}
}
} // 分页
},
methods: {
pageChange () {
this.$emit('page-change')
},
cellClick (row, column, cell, event) {
this.$emit('cell-click', { row, column, cell, event })
}
}
}
</script>
然后直接在页面中调用即可。
<template>
<div class="container">
<zt-table
:tableData="tableData"
:page="page"
:tableOption.sync="tableOption"
@page-change="getList"
@cell-click="cellClick">
<template slot="ranks" slot-scope="scope">
<el-tag>{
{ scope.row.name}}</el-tag>
</template>
<template slot="menu" slot-scope="scope">
<el-button type="text" size="mini" icon="el-icon-delete"
@click="deleteHandle(scope.row.id)">删除</el-button>
</template>
</zt-table>
</div>
</template>
<script>
import ZtTable from '@/components/Zttable'
export default {
components: {
ZtTable
},
data () {
return {
tableOption: [
{ label: '姓名', prop: 'name' },
{ label: '性别', prop: 'sex' },
{ label: '身份证号', prop: 'idNumber' },
{ label: '职务', prop: 'duty' },
{ label: '职级', prop: 'ranks', solt: true }/ / 这里表示自定义列
],
page: {
total: 0,
current: 1,
size: 10
},
tableData: []
}
},
created () {
this.getList()
},
methods: {
getList () {}, // 数据获取
cellClick (e) {}，
deleteHandle（）
}
}
</script>
<style lang="scss" scoped></style>