Table.vue

<template>
  <div class="eContainer-table-block">
    <el-table
      :id="tableRef"
      :data="list"
      ref="table"
      style="width: 100%"
      class="eContainer-table"
      :header-cell-style="{ background: 'rgb(235, 235, 235)', color: 'rgb(51, 51, 51)' }"
      v-bind="$attrs"
      v-on="tableListeners"
      v-loading="loading"
      :max-height="maxHeight"
    >
      <el-table-column
        v-for="(item, key) in columnsConfig"
        :key="key"
        v-bind="item"
      ></el-table-column>
      <slot></slot>
    </el-table>
    <c-col :span="16" style="text-align:left">
    <el-pagination
      class="eContainer-pagination"
      v-if="paginationShow && total>10"
      :background="type == 'small' ? false : true"
      small
      layout="prev, pager, next, jumper"
      :page-size="limit"
      :current-page="current"
      :total="total"
      v-on="$listeners"
    ></el-pagination>
    </c-col>
    <c-col :span="8" style="float:right">
    <div class="paginationLable" v-if="paginationShow">
      当前显示第 {{ page1 }}-{{ page2 }} 条，共 {{ total }} 条
    </div>
    </c-col>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "normal",
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    columnsConfig: {
      type: Array,
      default: () => {
        return [];
      },
    },
    total: {
      type: Number,
      default: 0,
    },
    current: {
      type: Number,
      default: 0,
    },
    limit: {
      type: Number,
      default: 0,
    },
    outerHeight: {
      type: Number,
      default: undefined,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    tableRowClassName: {
      type: Function,
    },
    maxHeight: {
      type: String,
      default: undefined,
    },
    paginationShow: {
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data() {
    return {
      page1: "",
      page2: "",
      tableListeners: {},
      tableRef: "tableRef" + Math.floor(Math.random() * 100),
    };
  },
  watch: {
    current: function () {
      this.getPageNum();
    },
    outerHeight: function () {
      if (this.outerHeight !== undefined) {
        window.removeEventListener("resize", this.handleResizeBind);
        this.clientHeight = `${document.documentElement.clientHeight}`;
        this.changeFixed();
        this.handleResizeBind = this.handleResize.bind(
          this,
          this.tableRef,
          this.outerHeight
        );
        window.addEventListener("resize", this.handleResizeBind);
      }
    },
  },
  created() {
    this.getPageNum();
    this.tableListeners = { ...this.$listeners };
    //delete this.tableListeners["current-change"];
  },
  mounted() {
    if (this.outerHeight) {
      this.clientHeight = `${document.documentElement.clientHeight}`;
      this.changeFixed();
      this.handleResizeBind = this.handleResize.bind(
        this,
        this.tableRef,
        this.outerHeight
      );
      window.addEventListener("resize", this.handleResizeBind);
    }
  },
  methods: {
    changeFixed() {
      let content = document.getElementById(this.tableRef);
      let clientHeight = `${document.documentElement.clientHeight}`;
      let target;
      for (let i = 0; i < content.children.length; i++) {
        if (content.children[i].classList.contains("el-table__body-wrapper")) {
          target = content.children[i];
        }
      }
      target.style.maxHeight = clientHeight - this.outerHeight + "px";
    },
    handleResize: (tableRef, outerHeight) => {
      let content = document.getElementById(tableRef);
      let clientHeight = `${document.documentElement.clientHeight}`;
      let target;
      for (let i = 0; i < content.children.length; i++) {
        if (content.children[i].classList.contains("el-table__body-wrapper")) {
          target = content.children[i];
        }
      }
      target.style.maxHeight = clientHeight - outerHeight + "px";
    },
    getPageNum() {
      if (this.current == Math.ceil(this.total / this.limit)) {
        this.page1 = this.current * this.limit - this.limit + 1;
        this.page2 = this.total;
      } else {
        this.page1 = this.current * this.limit - this.limit + 1;
        this.page2 = this.current * this.limit;
      }
    },
    tableRowClass: function ({ row, rowIndex }) {
      if (this.tableRowClassName) {
        return this.tableRowClassName({ row, rowIndex });
      } else {
        return "";
      }
    },
  },
  destroyed: function () {
    if (this.outerHeight) {
      window.removeEventListener("resize", this.handleResizeBind);
    }
  },
};
</script>

<style>
.eContainer-table-block .paginationLable {
  font-size: 12px;
  color: #808080;
  height: 26px;
  line-height: 26px;
  float: right;
  /* margin-top: 20px; */
}
.eContainer-table-block .el-table__body-wrapper {
  overflow: auto;
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.el-table--small td, .el-table--small th {
    padding: 3px 0;
}
/* .eContainer-table thead tr th.is-leaf{
  border-bottom: transparent;
} */
.eContainer-table-block .el-icon-arrow-right:before{
  margin-right: 0px;
  width: 0px;
}
</style>