vue基于elementUI的table以及分页进行二次封装

效果图如下：

<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>