<template>
  <el-table
      ref="table"
      :data="tableData"
  >
    <slot name="header" :header="headers">
      <el-table-column
          :key="index"
          :width="header.width"
          v-for="(header, index) in headers"
          :prop="header.prop"
          :label="header.label"
          show-overflow-tooltip
      >
        <template #default="scope">
          <slot :name="header.prop" :data="scope.row" :index="scope.$index">
            {{ scope.row[header.prop] }}
          </slot>
        </template>
      </el-table-column>
    </slot>
  </el-table>
</template>

<script>
export default {
  name: "MyTable",
  props:{
    tableData: {},
    headers: {},
  }
}
</script>

<style scoped lang="scss">
</style>