<!--
  @description: 采购计划-公用表格
  @author: lxl
  @date： 2020-10-29 11:52
-->
<template>
  <div class="customize-table">
    <div>
      <!-- max-height="241" -->
      <el-table
        v-loading="tableConfig.loading"
        border
        v-bind="tableConfig.attrs"
        :data="tableConfig.data"
        :span-method="tableConfig.spanMethod"
        @select="onSelected"
        @selection-change="onSelect"
        @select-all="onSelectedAll"
        @row-click="rowClick"
      >
        <template v-for="column in tableConfig.columns">
          <slot v-if="column.slot" :name="column.slot" :column="column" />
          <el-table-column
            v-else
            :key="column.prop"
            v-bind="column"
          />
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CustomizeTable',
  props: {
    tableConfig: {
      required: true,
      type: Object,
      default: () => ({}),
      data: {
        required: true,
        type: Array,
        default: () => []
      },
      attrs: {
        type: Object,
        default: () => {}
      },
      columns: {
        required: true,
        type: Array,
        default: () => []
      },
      isPagination: {
        type: Boolean,
        default: true
      },
      spanMethod: {
        type: Function,
        default: () => {}
      }
    }
  },
  data() {
    return {
      // key: value
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    operationHandler(handler, row, prop) {
      this.$emit(handler, row, prop)
    },
    onCreate() {
      this.$emit('on-create')
    },
    onSelect(val) {
      this.$emit('on-select', val)
    },
    onSelectedAll(val) {
      this.$emit('on-select-all', val)
    },
    onSelected(data, row) {
      this.$emit('on-selected', data, row)
    },
    rowClick(val) {
      this.$emit('row-click', val)
    }
  }
}
</script>
<style lang="less"></style>
