直接上代码
// 父组件
<!-- MyTable组件 -->
<template>
<div class="myTable">
<el-table
:data="tableData"
:border="page.isBorder"
:stripe="page.isStripe"
style="width: 100%"
ref="multipleTable"
tooltip-effect="dark"
@selection-change="SelectionChange"
>
<el-table-column v-if="page.isMutiSelect" type="selection" style="width: 55px">
</el-table-column>
<el-table-column
v-for="(item, i) in tableTitle"
:key="i"
:label="item.label"
:prop="item.prop"
:width="item.width"
:max-height="item.height"
:align="item.align"
>
<template slot-scope="scope">
<template v-if="!item.render">
<template v-if="item.formatter">
<span v-html="item.formatter(scope.row, item)"></span>
</template>
<template v-else>
{{ scope.row[item.prop] }}
</template>
</template>
</template>
</el-table-column>
<slot name="handleColumn"></slot>
</el-table>
<el-pagination
class="page_sty"
style="text-align: right"
background
@size-change="getSize"
hide-on-single-page
@current-change="getCurChange"
:page-size.sync="page.pageSize"
:page-sizes="page.pageSizesArr"
:current-page.sync="page.pageNum"
layout="total, sizes, prev, pager, next,jumper"
:total="page.total"
>
</el-pagination>
</div>
</template>
<script>
export default {
name: 'myTable',
props: {
// 表格数据
tableData: {
type: Array,
default: () => {
return []
}
},
// 表格配置项
tableTitle: {
type: Array,
default: () => {
return []
}
},
// 页码 每页条数 总数
page: {
type: Object,
default: function () {
return {
pageNum: 1, // 分页-当前页
pageSize: 10,
total: 0,
// 是否有边框 默认true
isBorder: true,
// 是否隔行换色 默认true
isStripe: true,
// 每页条数
pageSizesArr: [5, 10, 20, 50, 100],
// 是否多选
isMutiSelect: false
}
}
}
},
data() {
return {
}
},
methods: {
SelectionChange(val) {
//多行选中,暂时没用上
console.log(val, 'ppo')
},
// 修改每页条数
getSize(val) {
this.$set(this.page, 'pageNum', 1)
this.$emit('getPageTable', this.page.pageNum, val)
},
// 翻页
getCurChange(val) {
this.$emit('getPageTable', val, this.page.pageSize)
}
}
}
</script>
<style scoped>
.page_sty {
margin: 10px auto 0;
text-align: center;
}
</style>
子组件
<template>
<myTable
:tableTitle="tableTitle"
:tableData="tableData"
:page="pages"
@getPageTable="getTable"
@getSize="getTable"
v-loading="loadingTab"
>
<div slot="handleColumn">
<el-table-column fixed="right" label="操作" width="120" align="center">
<template slot-scope="scope">
<el-button @click="seeFun(scope.row)" type="primary" round size="mini"
>查看</el-button
>
</template>
</el-table-column>
</div>
</myTable>
</template>
<script>
import { videosList } from '@/request/api/videoPublishing/home'
import myTable from '@/components/myTable.vue'
export default {
components: {
//声明子组件
myTable
},
props: {
// 使用props接收参数
dialogVisible: Boolean,
dataPageId: Number
},
data() {
return {
// 加载
loadingTab: false,
// 表格配置项
tableTitle: [
//表头数据w
{ label: '序号', prop: 'index', width: '100px',align:'center' },
{ label: 'id', prop: 'id',align:'center' },
{
label: '是否完成',
prop: 'isComplete',
align:'center',
formatter: (row, column) => {
return row.isComplete== 1 ? '是' : '否'
}
},
{ label: '完成时间', prop: 'time',align:'center' }
],
tableData: [], //表格数据
pages: {
//分页数据
pageNum: 1, // 分页-当前页
pageSize: 10,
total: 0,
// 是否有边框 默认true
isBorder: true,
// 是否隔行换色 默认true
isStripe: true,
// 每页条数
pageSizesArr: [5, 10, 20, 50, 100],
// 是否多选
isMutiSelect: false
}
}
},
created() {
this.getTable(this.pages.pageNum, this.pages.pageSize)
},
methods: {
//请求表格数据
getTable(pageNum, pageSize) {
let data = {
pageid: this.dataPageId,
pageNum: this.pageNum,
pageSize: this.pageSize
}
this.loadingTab = true
videosList(data)
.then((res) => {
// 表格复制
this.tableData = res.data
// 前端生成序号
this.tableData.forEach((item, i) => {
item.index = indexMethod(i, pageNum, pageSize)
})
// 总条数赋值
this.pages.total = res.page.RecordCount
this.loadingTab = false
})
.catch((err) => {
this.loadingTab = false
})
},
}
}
</script>
<style scoped>
</style>
简单封装了一下,后期如果有别的需求还会完善!