<template>
  <div>
    <el-table ref="table" :data="data" stripe style="width: 100%" @selection-change="handleSelectionChange" :header-cell-style="headerStyle">
      <slot></slot>
      <el-table-column v-for="(value, key) in header" :key="key" :prop="key" :label="value" :width="columnWidths[key]" align="center" :show-overflow-tooltip="overflow">
        <template slot-scope="scope">
          <!--使用element-ui table 里边的scope-->
          <slot v-if="slotColumns.indexOf(key) > -1" :name="key" v-bind="scope"></slot>
          <!--判断slotColumns传进来的值key里边是否存在 给调用他的父级传scope-->
          <template v-else>{{ scope.row[key] }}</template>
          <!--用于某一列需要特殊处理-->
        </template>
      </el-table-column>
      <!--其余需要特殊处理的插槽-->
      <slot name="iconContorl"></slot>
      <!--图片控制的-->
      <slot name="picture"></slot>
      <!--图片-->
      <slot name="oprate"></slot>
      <!---操作栏--->
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    header: {
      type: Object,
      default: () => ({}),
    },
    data: {
      type: Array,
      default: () => [],
    },
    columnWidths: {
      type: Object,
      default: () => ({}),
    },
    slotColumns: {
      type: Array,
      default: () => [],
    },
    overflow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      headerStyle: {
        background: "#E7F6F3",
        color: "#333333",
        height: "50px",
        fontSize: "16px",
      },
    };
  },
  methods: {
    /**
     * 翻页初始化滚动条位置
     */
    initScroll() {
      let that = this;
      that.$refs.table.bodyWrapper.scrollTop = 0;
    },
    /**@Description 全选*/
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
  },
};
</script>

<style scoped></style>
