enTable.vue

<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="50">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <template v-for="(item, index) in tableColums">
        <el-table-column
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
        >
        </el-table-column>
      </template>
      <el-table-column
        v-if="isShowOp"
        align="center"
        label="操作"
        fixed="right"
        :width="opNum * 65"
      >
        <template slot-scope="scope">
          <slot name="operation" :scope="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <div
      v-if="isShowPage"
      style="
        display: flex;
        justify-content: flex-end;
        align-items: center;
        line-height: 3;
      "
    >
      <!-- <div  class="record-color marg_r_18">共34860条记录</div>
      <div class="record-color marg_r_8">共20页</div>
      <div class="record-color">每页显示</div> -->
      <!-- background -->
      <!-- <el-pagination layout="sizes, prev, pager, next"  :total="1000">
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'enTable',
  props: {
    // ["", "tableColums",'isShowOp'.toString
    tableData: {
      type: Array
    },
    tableColums: {
      type: Array
    },
    isShowOp: {
      type: Boolean,
      default: false
    },
    opNum: {
      type: Number,
      default: 4
    },
    isShowPage: {
      default: true
    },
    isEdit: {
      default: true
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$emit('handleBtnClick')
    }
  }
}
</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>