remuneration/src/components/AutoComponents/MTable/index.vue

<template>
  <m-card :shadow="shadow">
    <template v-if="cardTitle" slot="header">
      <span>{{ cardTitle }}</span>
    </template>
    <slot name="header"></slot>
    <el-table
      ref="table"
      :data="items"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template #append>
        <slot name="table-append"></slot>
      </template>
      <m-table-column
        v-for="(header, index) in headers"
        :key="(header.prop ?? header.label) || index"
        :item="header"
      >
        <template v-if="$scopedSlots[header.prop]" #[header.prop]="scope">
          <slot :name="header.prop" v-bind="scope"></slot>
        </template>
        <template v-if="$scopedSlots[`${header.prop}-header`]" #[`${header.prop}-header`]>
          <slot :name="`${header.prop}-header`"></slot>
        </template>
      </m-table-column>
    </el-table>
    <slot></slot>
    <div class="pt-3 text-right" v-if="total">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pageCurrent"
        background
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </m-card>
</template>

<script>
import MTableColumn from './MTableColumn.vue'
export default {
  name: 'm-table',
  components: { MTableColumn },
  props: {
    cardTitle: String,
    shadow: String,
    items: {
      type: Array,
      default: () => []
    },
    headers: {
      type: Array,
      default: () => []
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageCurrent: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.$emit('page-change', val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>