<style>
.eagle-table {
  width: 100%;
}
</style>

<template>
  <el-table class="eagle-table" ref="table" :data="tableData" v-bind="{ size: 'small', ...tableProps }" v-on="tableEvents">
    <slot></slot>
    <template v-if="list && list.length > 0">
      <template v-for="(item, index) in list">
        <slot v-if="$scopedSlots[item.key] || $slots[item.key]" :name="item.key" v-bind="item" :row="item"></slot>
        <el-table-column v-else v-bind="item" :prop="item.agentKey || item.key" :key="index" :min-width="item.minWidth || '120'"></el-table-column>
      </template>
    </template>
    <slot name="$append"></slot>
    <slot name="$end"></slot>
  </el-table>
</template>

<script>
export default {
  name: 'Table',
  props: {
    // 用于实例化本组件绑定v-model的值
    value: Array,
    // 配置列表
    list: {
      type: Array,
      required: true
    },
    // 表格参数
    tableProps: {
      type: Object,
      default() { return {} }
    },
    // 表格事件
    tableEvents: Object,
  },
  mounted() {
    this.tableData = this.value || [];
  },
  computed: {
    // 表格实体
    instance: {
      get() {
        return this.$refs.table;
      }
    }
  },
  watch: {
    // 组件外部v-model值更新后同步刷新model
    value(val) {
      this.tableData = val || [];
    },
  },
  data() {
    return {
      // 表格数据
      tableData: [],
    };
  },
  methods: {

  }
};
</script>