效果图如下：
<template>
<div class="table">
<el-table :data="tableData" style="width: 100%">
<template v-for="(v, i) in tableConfig">
<!-- self属性用于标记需要做特殊操作的一些列 -->
<el-table-column v-if="v.self && v.self.operation" :key="i" v-bind="v">
<template slot-scope="scope">
<template v-for="(item,index) in v.self.operation">
<el-tooltip
class="item btn-xs"
placement="top"
effect="dark"
:key="index"
:content="item.label"
>
<el-button
type="text"
size="mini"
:icon="item.icon"
:disabled="item.disabled"
@click.native.prevent="item.method(index,scope.row)"
>{
{
item.label}}</el-button>
</el-tooltip>
</template>
</template>
</el-table-column>
<el-table-column v-else :key="i" v-bind="v">
<template slot-scope="scope">
<span v-if="v.render">
{
{
v.render(scope.row)}}
</span>
<span v-else>{
{
scope.row[v.prop]}}</span>
</template>
</el-table-column>
</template>
</el-table>
<el-pagination
v-if="isNeedPage"
@current-change="handleCurrentChange"
:current-page="pagination.page"
:page-size="pagination.size"
:total="pagination.total"
layout="total, prev, pager, next, jumper"
>
</el-pagination>
</div>
</template>
<script>
export default {
props: {
tableData: Array,
tableConfig: Array,
isNeedPage: Boolean,
pagination: {
type: Object,
default: () => {
return {
page: 1,
size: 10,
total:0
};
}
}
},
mounted() {
console.log(this.tableData, "test")
},
data() {
return {
}
},
methods: {
handleCurrentChange(val) {
console.log(`第 + ${
val} + 页`);
this.$emit('handlePageChange', Number(val))
}
}
}
</script>
<style lang="less" scoped>
.table {
width: 100%;
padding: 0 20px;
}
</style>
使用
<template>
<div class="content-page">
<div class="tab-content">
<elTable
:tableData="tableData"
:isNeedPage="true"
:tableConfig="tableConfig"
:pagination="pagination"
@handlePageChange="handlePageChange"
>
</elTable>
</div>
</div>
</template>
<script>
import elTable from "@/components/elTable.vue"
import {
getCompanyDataList } from "@/api/index.js"
export default {
components: {
elTable
},
data() {
return {
tableData: [],
tableConfig: [],
pagination: {
page: 1,
size: 3,
total: 0
}
}
},
mounted() {
this.getCompanyDataList()
},
methods: {
getCompanyDataList() {
getCompanyDataList({
page: this.pagination.page,
size: this.pagination.size
})
.then(res => {
if (res.code == 1) {
let that = this
that.tableData = res.data.list
that.tableConfig = [
// {
// type: 'selection',
// width: '50',
// },
{
prop: 'companyName',
label: '企业名称',
},
{
prop: 'createTime',
label: '申报时间',
},
{
prop: 'declareTime',
label: '上报时间',
},
{
prop: 'companyInfoId',
label: '状态',
render: row => {
if (row.companyInfoId == '12') {
return '已发布';
} else if (row.companyInfoId == '13') {
return '发布中';
} else if (row.companyInfoId == '14') {
return '未发布';
}
}
},
{
label: '操作',
self: {
operation: [
{
label: "编辑", disabled: false, method:(index,row)=>{
that.updateItem(index, row) } },
{
label: "删除", disabled: false, method:(index,row)=>{
that.deleteItem(index, row) } },
]
},
}
]
this.pagination.total = res.data.total
} else if (res.code == 401) {
this.$router.push("/login")
} else {
this.$notify({
title: "提示",
message: res.msg,
type: "warning",
duration: 1000,
});
}
})
},
handlePageChange(val) {
console.log(`第 + ${
val} + 页`);
this.pagination.page = val
this.getCompanyDataList()
},
updateItem(index, row) {
console.log(index, row)
},
deleteItem(index, row) {
console.log(index, row)
}
}
}
</script>
<style lang="less" scoped>
.content-page {
.tab-content {
width: 100%;
padding: 20px;
}
}
</style>