<template>
  <div class="app-table">
    <el-table v-bind="$attrs" border>
      <el-table-column type="expand" v-if="$slots.expand">
        <template #default="{ row }">
          <slot name="expand" :row="row"></slot>
        </template>
      </el-table-column>
      <el-table-column v-for="(item, index) in columns" :key="index" :filters="item.filters"
        :filter-method="item.filterMethod" :class-name="item.className" :label="item.label"
        :align="item.align ?? 'center'" :width="item.width">
        <template #default="{ row }">
          <slot :name="item.key" :row="row">{{ row[item.key] }}</slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { PropType } from 'vue'
import { TableColumn } from './interface'

defineProps({
  columns: {
    type: Array as PropType<TableColumn[]>,
    default: () => ([])
  },
})
</script>

<style lang="less">
@import './index.less';
</style>