<template>
  <el-table
    size='small'
    :data="tableData"
    :span-method="handleSpanMethod"
    @selection-change="handleSelectionChange"
    @sort-change="handleSortChange"
    @row-click="handleRowClick"
    :row-class-name="tableRowClassName"
    :empty-text='emptyText'
    border
    style="width: 100%">
      <el-table-column
        v-for='column in columns'
        :key='column.prop'
        :type="column.type"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :sortable="column.sortable"
        :show-overflow-tooltip="column.tooltip"
        :align="column.align || 'left'"
        :formatter='column.formatter'
        :subColumns='column.subColumns'
     
      >
        <el-table-column
          v-for='subColumn in column.subColumns'
          :key='subColumn.prop'
          :type="subColumn.type"
          :prop="subColumn.prop"
          :label="subColumn.label"
          :width="subColumn.width"
          :sortable="subColumn.sortable"
          :align="subColumn.align || 'left'"
          :formatter='subColumn.formatter'
      
        />
      </el-table-column>
  </el-table>
</template>

<script>

export default {
  props: {
    handleSpanMethod: {
      type: Function,
      required: false,
      default: () => {}
    },
    handleSelectionChange: {
      type: Function,
      required: false,
      default: () => {}
    },
    handleRowClick: {
      type: Function,
      required: false,
      default: () => {}
    },
    handleSortChange: {
      type: Function,
      required: false,
      default: () => {}
    },
    tableRowClassName: {
      type: Function,
      required: false,
      default: () => {}
    },
    loading: {
      type: Boolean,
      required: false,
      default: true
    },
    tableData: {
      type: Array,
      required: false,
      default: () => []
    },
    columns: {
      type: Array,
      required: false,
      default: ()=> [],
    }
  },
  computed: {
    emptyText() {
       return (!this.loading && !this.tableData.length) ? '暂无数据' : '加载中...'
    },
  },
  data() {
    return {}
  }
}
</script>


