Table.vue 5.18 KB
Newer Older
liuxin committed
1 2
<template>
  <div class="eContainer-table-block">
zhengxiaokui committed
3 4 5 6 7 8
    <el-table
      :id="tableRef"
      :data="list"
      ref="table"
      style="width: 100%"
      class="eContainer-table"
liushikai committed
9
      :header-cell-style="{ background: 'rgb(235, 235, 235)', color: 'rgb(51, 51, 51)' }"
zhengxiaokui committed
10 11 12 13 14
      v-bind="$attrs"
      v-on="tableListeners"
      v-loading="loading"
      :max-height="maxHeight"
    >
liuxin committed
15 16 17 18 19 20 21
      <el-table-column
        v-for="(item, key) in columnsConfig"
        :key="key"
        v-bind="item"
      ></el-table-column>
      <slot></slot>
    </el-table>
liushikai committed
22
    <c-col :span="16" style="text-align:left">
liuxin committed
23 24
    <el-pagination
      class="eContainer-pagination"
jianglong committed
25
      v-if="paginationShow && total>10"
zhengxiaokui committed
26
      :background="type == 'small' ? false : true"
liuxin committed
27 28 29 30 31 32 33
      small
      layout="prev, pager, next, jumper"
      :page-size="limit"
      :current-page="current"
      :total="total"
      v-on="$listeners"
    ></el-pagination>
liushikai committed
34
    </c-col>
jianglong committed
35
    <c-col :span="8" style="float:right">
zhengxiaokui committed
36 37 38
    <div class="paginationLable" v-if="paginationShow">
      当前显示第 {{ page1 }}-{{ page2 }} 条,共 {{ total }}
    </div>
liushikai committed
39
    </c-col>
liuxin committed
40 41 42 43 44 45 46 47
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
zhengxiaokui committed
48
      default: "normal",
liuxin committed
49 50 51 52
    },
    list: {
      type: Array,
      default: () => {
zhengxiaokui committed
53 54
        return [];
      },
liuxin committed
55 56 57 58
    },
    columnsConfig: {
      type: Array,
      default: () => {
zhengxiaokui committed
59 60
        return [];
      },
liuxin committed
61 62 63
    },
    total: {
      type: Number,
zhengxiaokui committed
64
      default: 0,
liuxin committed
65 66 67
    },
    current: {
      type: Number,
zhengxiaokui committed
68
      default: 0,
liuxin committed
69 70 71
    },
    limit: {
      type: Number,
zhengxiaokui committed
72
      default: 0,
liuxin committed
73 74 75
    },
    outerHeight: {
      type: Number,
zhengxiaokui committed
76
      default: undefined,
liuxin committed
77 78 79
    },
    loading: {
      type: Boolean,
zhengxiaokui committed
80
      default: false,
liuxin committed
81 82
    },
    tableRowClassName: {
zhengxiaokui committed
83
      type: Function,
liuxin committed
84
    },
zhengxiaokui committed
85
    maxHeight: {
liuxin committed
86
      type: String,
zhengxiaokui committed
87
      default: undefined,
潘际乾 committed
88 89 90 91
    },
    paginationShow: {
      type: Boolean,
      required: false,
zhengxiaokui committed
92 93
      default: true,
    },
liuxin committed
94
  },
zhengxiaokui committed
95 96 97 98
  data() {
    return {
      page1: "",
      page2: "",
liuxin committed
99
      tableListeners: {},
zhengxiaokui committed
100 101
      tableRef: "tableRef" + Math.floor(Math.random() * 100),
    };
liuxin committed
102 103
  },
  watch: {
zhengxiaokui committed
104 105
    current: function () {
      this.getPageNum();
liuxin committed
106
    },
zhengxiaokui committed
107
    outerHeight: function () {
liuxin committed
108
      if (this.outerHeight !== undefined) {
zhengxiaokui committed
109 110 111 112 113 114 115 116 117
        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);
liuxin committed
118
      }
zhengxiaokui committed
119
    },
liuxin committed
120 121
  },
  created() {
zhengxiaokui committed
122 123 124
    this.getPageNum();
    this.tableListeners = { ...this.$listeners };
    //delete this.tableListeners["current-change"];
liuxin committed
125 126 127
  },
  mounted() {
    if (this.outerHeight) {
zhengxiaokui committed
128 129 130 131 132 133 134 135
      this.clientHeight = `${document.documentElement.clientHeight}`;
      this.changeFixed();
      this.handleResizeBind = this.handleResize.bind(
        this,
        this.tableRef,
        this.outerHeight
      );
      window.addEventListener("resize", this.handleResizeBind);
liuxin committed
136 137 138 139
    }
  },
  methods: {
    changeFixed() {
zhengxiaokui committed
140 141 142
      let content = document.getElementById(this.tableRef);
      let clientHeight = `${document.documentElement.clientHeight}`;
      let target;
liuxin committed
143
      for (let i = 0; i < content.children.length; i++) {
zhengxiaokui committed
144 145
        if (content.children[i].classList.contains("el-table__body-wrapper")) {
          target = content.children[i];
liuxin committed
146 147
        }
      }
zhengxiaokui committed
148
      target.style.maxHeight = clientHeight - this.outerHeight + "px";
liuxin committed
149 150
    },
    handleResize: (tableRef, outerHeight) => {
zhengxiaokui committed
151 152 153
      let content = document.getElementById(tableRef);
      let clientHeight = `${document.documentElement.clientHeight}`;
      let target;
liuxin committed
154
      for (let i = 0; i < content.children.length; i++) {
zhengxiaokui committed
155 156
        if (content.children[i].classList.contains("el-table__body-wrapper")) {
          target = content.children[i];
liuxin committed
157 158
        }
      }
zhengxiaokui committed
159 160 161 162 163 164 165 166 167
      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;
liuxin committed
168 169
      }
    },
zhengxiaokui committed
170
    tableRowClass: function ({ row, rowIndex }) {
liuxin committed
171
      if (this.tableRowClassName) {
zhengxiaokui committed
172
        return this.tableRowClassName({ row, rowIndex });
liuxin committed
173
      } else {
zhengxiaokui committed
174
        return "";
liuxin committed
175
      }
zhengxiaokui committed
176
    },
liuxin committed
177 178 179
  },
  destroyed: function () {
    if (this.outerHeight) {
zhengxiaokui committed
180
      window.removeEventListener("resize", this.handleResizeBind);
liuxin committed
181 182
    }
  },
zhengxiaokui committed
183
};
liuxin committed
184 185 186
</script>

<style>
zhengxiaokui committed
187 188 189 190 191 192
.eContainer-table-block .paginationLable {
  font-size: 12px;
  color: #808080;
  height: 26px;
  line-height: 26px;
  float: right;
liushikai committed
193
  /* margin-top: 20px; */
liuxin committed
194 195 196 197 198 199 200 201 202 203
}
.eContainer-table-block .el-table__body-wrapper {
  overflow: auto;
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
liushikai committed
204 205 206
.el-table--small td, .el-table--small th {
    padding: 3px 0;
}
liushikai committed
207
/* .eContainer-table thead tr th.is-leaf{
liushikai committed
208
  border-bottom: transparent;
liushikai committed
209
} */
Wuyuqiu committed
210 211 212 213
.eContainer-table-block .el-icon-arrow-right:before{
  margin-right: 0px;
  width: 0px;
}
liuxin committed
214
</style>