<template>
  <el-table ref="table" v-bind="$attrs" v-on="$listeners">
    <el-table-column v-for="(column,idx) in visibleColumns" :key="idx" v-bind="col">
      <template v-if="column.slotHeader" #header="{$index}">
        <slot :name="column.slotHeader" v-bind="{ column, $index}">
          {{ column.label }}
        </slot>
      </template>
      <template v-if="column.slotBody" #default="{row, $index}">
        <slot :name="column.slotBody" v-bind="{row, column, $index, value: row[column.prop]}">
          {{ row[column.prop] }}
        </slot>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'dynamic-table',
  props: {
    columns: { type: Array, default: () => [{ prop: '', slotBody: '', slotHeader: '' }] }
  },
  computed: {
    visibleColumns() {
      return this.columns.filter(col => col.hidden !== true)
    },
    tableCore() {
      return this.$refs.table
    }
  }
}
</script>

<style scoped>

</style>
