在vue + element的一些後臺管理項目中表格分頁是經常用到的，所以我在element的基礎上，將表格和分頁組封裝成了一個組件。
表格子組件文件
<template>
<div class="tableComponent">
<template v-if="tableInfo && tableInfo !== null">
<el-table class="table-box"
:data="tableInfo.tableData"
stripe
style="width: 100%;"
ref="RocketsTable"
:v-loading="isLoading"
@row-click="rowClick"
@selection-change="handleSelectionChange">
<template v-if="tableInfo.tableData && tableInfo.tableData.length !== 0">
<template v-if="tableInfo.tableConfig">
<template v-for="(item, index) in tableInfo.tableConfig">
<el-table-column v-if="item.renderEventTxt"
:prop="item.prop"
:label="item.label"
sortable
:fixed="item.fixed"
:align="item.align || 'center'"
:key="index + Math.ceil(Math.random() * 99999)"
:width="item.width"
:formatter="item.renderFun"
:type="item.type ? item.type : null">
<template slot-scope="scope">
<el-button v-if="item.renderEvent && item.renderEventTxt"
type="text"
@click="item.renderEvent(scope.row)">{{item.renderEventTxt ? item.renderEventTxt(scope.row) : '查看'}}</el-button>
<template v-else-if="item.renderFun">{{item.renderFun(scope.row)}}</template>
<template v-else>{{scope.row[item.prop]}}</template>
</template>
</el-table-column>
<el-table-column v-else
:prop="item.prop"
sortable
:label="item.label"
:fixed="item.fixed"
:align="item.align || 'center'"
:key="index + Math.ceil(Math.random() * 99999)"
:width="item.width"
:formatter="item.renderFun"
:type="item.type ? item.type : null">
</el-table-column>
</template>
</template>
<template v-if="tableInfo.btnRender">
<el-table-column v-for="(item, index) in tableInfo.btnRender"
:label="item.label"
:key="index + '-label'"
fixed="right"
width="50"
align="center">
<template slot-scope="scope">
<el-button v-if="!item.isShow"
@click.native.prevent="item.btnEvent(scope.row)"
plain
:type="item.type"
:icon="item.icon"
size="mini"></el-button>
<el-button v-else-if="item.isShow(scope.row) === true"
@click.native.prevent="item.btnEvent(scope.row)"
plain
:type="item.type"
:icon="item.icon"
size="mini"></el-button>
</template>
</el-table-column>
</template>
</template>
<template v-else>
<el-table-column empty-text="暫無數據"></el-table-column>
</template>
</el-table>
</template>
<div class="block"
v-if="pagination">
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'PublicTable',
props: {
// 表格數據
tableInfo: {
type: Object,
default: function () {
return null
}
},
// 分頁的數據
pageData: {
type: Object,
default: function () {
return null
}
},
// 是否有分頁
pagination: {
type: Boolean,
default: true
},
// 加載條
isLoading: {
type: Boolean,
default: false
}
},
methods: {
// 每頁多少條
handleSizeChange (pageSize) {
this.$emit('handleSizeChange', pageSize)
},
// 當前頁碼
handleCurrentChange (pageIndex) {
this.$emit('handleCurrentChange', pageIndex)
},
// 多選
handleSelectionChange (selected) {
this.$emit('handleSelectionChange', selected)
},
// 點擊表格某行
rowClick (row) {
this.$emit('rowClick', row)
}
}
}
</script>
<style lang="scss" scoped>
.tableComponent {
.block {
margin: 20px 0;
text-align: right;
}
.btn-box {
padding: 10px;
vertical-align: top;
.el-button {
vertical-align: top;
}
}
.el-button--mini,
.el-button--mini.is-round {
padding: 7px;
}
}
</style>
父組件中調用表格組件
<template>
<div class="mod-home">
<public-table ref="RocketsTable"
:table-info="tableInfo"
:pageData="pageData"
:isLoading="isLoading"
@handleSelectionChange="handleSelectionChange"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></public-table>
</div>
</template>
<script>
// 引入組件
import PublicTable from '@/components/PublicTable'
export default {
components: {
PublicTable
},
data () {
return {
tableInfo: {
// 表格數據
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區金沙江路 1518 弄',
status: '0'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區金沙江路 1517 弄',
status: '1'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區金沙江路 1519 弄',
status: '1'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區金沙江路 1516 弄',
status: '0'
}
],
// 表格配置
tableConfig: [
{
type: 'selection',
width: '55',
fixed: 'left'
},
{
type: 'index',
width: '55',
fixed: 'left'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'date',
label: '日期',
align: 'center',
width: '150px'
},
{
prop: 'name',
label: '姓名'
},
// 如果想根據不同條件去渲染，可以用renderFun函數
{
prop: 'status',
label: '狀態',
align: 'center',
width: '100px',
renderFun: function (row) {
if (row.status === '0') {
return <span style="color: #E6A23C;">禁用</span>
} else {
return <span style="color: #67C23A;">啓用</span>
}
}
},
{
prop: 'date',
label: '日期',
align: 'center',
width: '200px'
},
{
prop: 'address',
label: '地址',
width: '300px'
}
],
// 按鈕的配置
btnRender: [
{
label: '編輯',
type: 'primary',
btnEvent: this.editRow,
icon: 'el-icon-edit'
},
{
label: '詳情',
type: 'success',
icon: 'el-icon-view',
btnEvent: this.detailsRow
},
{
label: '刪除',
type: 'danger',
icon: 'el-icon-delete',
btnEvent: this.deleteRow
}
]
},
// 分頁的配置
pageData: {
pageSize: 10,
pageIndex: 1,
total: 0
},
// 加載條
isLoading: true
}
},
methods: {
editRow (row) {
console.log(row)
},
detailsRow (row) {
console.log(row)
},
deleteRow (row) {
console.log(row)
},
// 多選事件
handleSelectionChange (val) {
console.log(val)
},
handleSizeChange (val) {
console.log(val)
},
handleCurrentChange (val) {
console.log(val)
}
}
}
</script>
<style>
</style>
如果表格有其它的需求，可以在子組件中進行修改。
好了，一個簡單的組件封裝就結束了。如果有問題或者錯誤，隨時溝通。