<template>
  <div class="en-table">
    <el-table
      stripe
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{
        background: 'rgba(0, 151, 255, 0.08)',
        color: '#333333',
      }"
    >
      <el-table-column align="center" label="序号" width="100">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <template v-for="item in tableColums">
        <el-table-column
          :key="item.id"
          v-if="item.slot"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          header-align="center"
          align="center"

        >
          <template slot-scope="scope">
            <slot :name="item.prop" :scope="scope.row"></slot>
          </template>
        </el-table-column>
        <el-table-column
          :key="item.id"
          v-else
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
           header-align="center"
          align="center"

        >
        </el-table-column>
      </template>

      <el-table-column v-if='showOpr' align="center" label="操作" :width="opNum * 80">
        <template slot-scope="scope">
          <slot name="operation" :scope="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script >
export default {
  name: 'table-list',
  props: {
    tableData: {
      type: Array
    },
    tableColums: {
      type: Array
    },
    opNum: {
      type: Number,
      default: 3
    },
    showOpr: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {}
  }
}
</script>
<style  lang="scss">
.record-color {
  color: #0097ff;
}
.marg_r_18 {
  margin-right: 18px;
}
.marg_r_8 {
  margin-right: 8px;
}
.en-table {
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    margin: 0 !important;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    color: #32a5ea !important;
    background-color: red !important;
  }
}
</style>