封装table表格+分页，动态渲染表头

<template>
  <div>
    <el-table
      v-loading="isShowLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(f, f, f, 0.8)"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      height="calc(100% - 50px)"
      stripe
      :header-cell-style="{'text-align':'center'}"
    >

      <el-table-column align="center" label="序号" width="100">
        <template slot-scope="scope">
          <!-- (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1 -->
          <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <!-- 表格 -->
      <el-table-column v-for="(item,index) in headList" :key="index" :align="item.align" :label="item.label">
        <template slot-scope="scope">
          <span>{{ scope.row[item.data] }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column v-if="totalList.length>1" align="right" label="合计">
        <template slot-scope="{row}">
          <span>{{ calculationAdd(row) }}</span>
          <span />
        </template>
      </el-table-column> -->

      <!-- <el-table-column v-if="isShowScale" align="right" label="比例">
        <template slot-scope="{row}">
          <span>{{ scale(row) }}%</span>
          <span />
        </template>
      </el-table-column> -->

      <el-table-column v-if="isShowCaozuo" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">点击查看详情</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  filters: {

  },
  props: {
    isShowLoading: {
      type: Boolean
    },

    isShowCaozuo: {
      type: Boolean
    },
    // isShowScale: {// 是否显示比例
    //   type: Boolean
    // },
    headList: { // 父组件传递过来的表头数据
      type: Array,
      default: () => {
        return []
      }
    },
    list: { // 父组件传递过来的表格数据
      type: Array,
      default: () => {
        return []
      }
    },
    totalList: { // 父组件传递过来的表格数据,用于计算合计
      type: Array,
      default: () => {
        return []
      }
    },
    total: { // 总页数
      type: Number,
      default: 0
    },
    currentPage: { // 当前页
      type: Number,
      default: 1
    },
    pageSize: { // 每页显示条数
      type: Number,
      default: 10 // 默认10条
    }

  },
  data() {
    return {
      iPageSize: this.pageSize,
      iCurrentPage: this.currentPage,
      iTotal: this.total,
      tableTotal: []
    }
  },
  computed: {},
  watch: {
    pagination: { // 监听器
      deep: true,
      handler(v) {
        if (!v) {
          return
        }
        const { pageSize, total, currentPage } = v
        this.iPageSize = pageSize
        this.iTotal = total
        this.iCurrentPage = currentPage
      }
    }
  },
  created() { },
  mounted() { },
  methods: {
    // 通讯
    handleClick(row, column, event, cell) {
      this.$emit('handleClick', row)
    },
    // 每页展示条数
    handleSizeChange(val) {
      this.$emit('handleSizeChangeSub', val)
    },
    // 当前页
    handleCurrentChange(val) {
      this.$emit('handleCurrentChangeSub', val)
    }
    // // 合计
    // calculationAdd(row) {
    //   return this.totalList.map((key) => row[key]).reduce((a, b) => a + b, 0)
    // }
    // 比例
    // scale(row) {
    //   const num = row.todayRegisteredVisitsCount / row.todayTotalVisitsCount
    //   return Math.floor(num * 10000) / 100
    // }
  }

}
</script>
<style lang="scss" scoped>
.pagination {
    margin-top: 20px;
}
// .assets-table  /deep/.el-table__body-wrapper {
//     height: calc(100% - 55px) !important;
//   }
.cell>span{
  white-space:nowrap;
}
</style>