后台管理系统我们用的最多应该就是表格了，今天和大家分享一个拿来即用的后台系统table并带分页的组件。 大致的思路是我们需将table相应的属性动态传递、table相应的事件操作通过$emit传递到父组件中去、以及表格列需特殊操作的我们可以通过slot去做处理。这里只是做了一个比较基础的封装，有其他需求的可以在此基础上进行添加。欢迎各位小伙伴们一起交流。
一、当前组件页面
<template>
<div class="page-box">
<el-table
v-loading="tableLoading"
:data="tableData"
ref="multipleTable"
:height="tableHeight"
style="width: 100%"
:header-cell-style="{ background: '#F2F4F7', fontSize: '15px', fontWeight: '400', color: '#303133' }"
border
empty-text
@selection-change="handleSelectionChange"
>
<!-- 无数据提示 -->
<slot slot="empty">{{ noData }}</slot>
<!-- 勾选框 -->
<el-table-column v-if="selection" type="selection" width="60" fixed :selectable="selectDisableRoom"></el-table-column>
<template v-for="(item, index) in tableColumns">
<!-- 操作 -->
<slot v-if="item.slot" :name="item.slot"></slot>
<el-table-column
v-else
:key="index"
:prop="item.prop"
:label="item.label"
:min-width="item.minWidth" :width="item.width ? item.width : ''"
:align="item.align ? item.align : 'center'"
:sortable="item.sortable ? item.sortable : false"
:show-overflow-tooltip="item.showTooltip ? item.showTooltip : false"
>
</el-table-column>
</template>
</el-table>
<div v-if="total > 0">
<!-- 分页 -->
<pagination
:pageNum="page"
:pageSize="rows"
:total="total"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange"
>
</pagination>
</div>
</div>
</template>
<script>
import pagination from '@/components/pagination'
export default {
components: {
pagination
},
props: {
tableData: {
// 表格数据
type: Array,
default: () => {
return []
}
},
tableColumns: {
// 表头数据
type: Array,
default: () => {
return []
}
},
tableHeight: {
// 表格高度
type: Number || String,
default: () => {
return null
}
},
selection: {
// 勾选框
type: Boolean,
default: () => {
return false
}
},
noData: {
type: String,
default: () => {
return '暂无数据'
}
},
total: {
// 总页数
type: Number || String,
default: () => {
return 0
}
},
page: {
// 当前页
type: Number || String,
default: () => {
return 1
}
},
rows: {
// 页码
type: Number || String,
default: () => {
return 10
}
},
tableLoading: {
type: Boolean,
default: () => {
return false
}
}
},
data() {
return {}
},
mounted() {},
methods: {
selectDisableRoom(row) {
if (row.select) {
return false
}
return true
},
// 多选事件
handleSelectionChange(val) {
this.$emit('handleSelectionChange', val)
},
// 切换当前一页展示多少条
handleSizeChange(val) {
this.$emit('handleChange', { pageSize: val, pageNum: 1 })
},
// 翻页
handleCurrentChange(val) {
this.$emit('handleChange', { pageNum: val, pageSize: this.rows })
}
}
}
</script>
<style lang="scss" scoped>
.page-box {
width: 100%;
}
</style>
二、父组件
<template>
<div>
<div>
<myTable
:tableData="tableData"
:tableHeight="400"
:selection="true"
:tableColumns="tableColumns"
:page="pageInfo.pageNum"
:rows="pageInfo.pageSize"
:total="total"
@handleChange="handleChange"
@handleSelectionChange="handleSelectionChange"
>
<el-table-column slot="operate" label="操作" align="center" width="">
<template slot-scope="scope">
<el-button size="small" type="warning" icon="el-icon-edit" @click="edit(scope.row)">编辑 </el-button>
</template>
</el-table-column>
</myTable>
</div>
</div>
</template>
<script>
import myTable from '@/components/myTable'
export default {
components: {
myTable
},
data() {
return {
//表格数据
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}
],
tableColumns: [
{
label: '日期',
prop: 'date',
width: '',
sortable: true
},
{
label: '地址',
prop: 'address',
width: ''
},
{
label: '操作',
width: '',
slot: 'operate'
}
],
pageInfo: {
pageNum: 1,
pageSize: 10
},
total:2
}
},
methods: {
edit(row) {
console.log('row=>>', row)
},
handleChange(val) {
console.log(val, 'val=>>')
this.pageInfo = val
},
handleSelectionChange(val) {
console.log(val,'val=>>')
}
}
}
</script>
