bi-element-ui 0.1.41 → 0.1.43

package/src/components/BiTable/table.vue

@@ -1,202 +1,202 @@
-<template>
-  <div class="bi-table">
-    <div class="bi-table-wrapper">
-      <el-table
-        ref="elTable"
-        :data="data"
-        :max-height="maxHeight"
-        v-bind="$attrs"
-        v-on="$listeners"
-      >
-        <template v-for="item in tbColumns">
-          <el-table-column
-            v-if="item.slotScope"
-            :key="item.prop+item.label"
-            v-bind="item"
-            v-on="$listeners"
-          >
-            <template slot-scope="scope">
-              <slot
-                :name="item.prop"
-                v-bind="scope"
-              ></slot>
-            </template>
-          </el-table-column>
-
-          <bi-column
-            v-else
-            :key="item.prop+item.label"
-            v-bind="$attrs"
-            :column="item"
-          />
-        </template>
-      </el-table>
-    </div>
-    <template v-if="pagination">
-      <pagination
-        v-if="data.length > 0"
-        v-bind="$attrs"
-        v-on="$listeners"
-      />
-    </template>
-  </div>
-</template>
-
-<script>
-import BiColumn from './columu'
-import Pagination from '../Pagination'
-
-export default {
-  name: 'BiTable',
-  components: {
-    Pagination,
-    BiColumn
-  },
-  props: {
-    data: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    column: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    columnsProps: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    pagination: {
-      type: Boolean,
-      default: false
-    },
-    fixed: {
-      type: String,
-      default: ''
-    },
-    fixedOffset: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      maxHeight: null
-    }
-  },
-  computed: {
-    tbColumns() {
-      const { column, columnsProps: props } = this
-      return column.map((col) => {
-        const it = Object.assign({}, props, col)
-        return it
-      })
-    },
-    fixedHeader() {
-      return this.fixed
-    }
-  },
-  mounted() {
-    if (this.fixedHeader === 'sticky') {
-      window.addEventListener('scroll', this.handleStickyHeader, true)
-    } else if (this.fixedHeader === 'fullscreen') {
-      window.addEventListener('scroll', this.handleFixedHeader, true)
-      // this.maxHeight = 300
-    }
-  },
-  destroyed() {
-    if (this.fixedHeader === 'sticky') {
-      window.removeEventListener('scroll', this.handleStickyHeader, true)
-    } else if (this.fixedHeader === 'fullscreen') {
-      window.removeEventListener('scroll', this.handleFixedHeader, true)
-      // this.maxHeight = 300
-    }
-  },
-  methods: {
-    handleStickyHeader() {
-      // 获取滚动条滚动的高度
-      const scrollTop = document.documentElement.scrollTop
-      // 先获取父盒子的距离顶部的高度，从而算出子盒子的高度。
-
-      const offsetTop = this.getElementTop(this.$el)
-      // 当子盒子距离顶部的距离 小于滚动的高度，使子盒子吸顶。
-
-      if (scrollTop > offsetTop + 30) {
-        // 判断当前是否已经固定。headerStatus优化值 可有可无。
-        if (!this.headerStatus) {
-          this.headerStatus = true
-          // 当前子盒子要在父盒子中横向滚动 所以使用absolute 绝对定位。
-          this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.position = 'absolute'
-          this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '2'
-        }
-        // 绝对定位 top值需要一直改变 所以动态添加top值
-        const top = scrollTop - (offsetTop + 1) + Number(this.fixedOffset)
-        // 中间header
-        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.transform = `translate3d(0px, ${top}px, 0px)`
-        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.position = 'relative'
-
-        // 左边header
-        if (this.$el.querySelector('.el-table__fixed')) {
-          this.$el.querySelector('.el-table__fixed').style.zIndex = '3'
-        }
-        if (this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper')) {
-          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, ${top}px, 0px)`
-          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.zIndex = '4'
-        }
-
-        // 右边header
-        if (this.$el.querySelector('.el-table__fixed-right')) {
-          this.$el.querySelector('.el-table__fixed-right').style.zIndex = '4'
-        }
-        if (this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper')) {
-          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, ${top}px, 0px)`
-          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.zIndex = '4'
-        }
-      } else {
-        this.headerStatus = false
-        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.position = 'relative'
-        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.transform = `translate3d(0px, 0px, 0px)`
-
-        if (this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper')) {
-          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.zIndex = `3`
-          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, 0px, 0px)`
-        }
-        if (this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper')) {
-          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.zIndex = `3`
-          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, 0px, 0px)`
-        }
-        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '3'
-        this.$el.getElementsByClassName('el-table__body-wrapper')[0].style.paddingTop = '0'
-      }
-    },
-    handleFixedHeader() {
-      // const scrollTop = document.documentElement.scrollTop
-      const offsetTop = this.$el.getBoundingClientRect().top // el-table 父级div
-      const tableHeight = window.innerHeight - Number(this.fixedOffset) - (this.pagination ? 72 : 0)
-      if (Math.abs(tableHeight - this.maxHeight) > 3) {
-        this.maxHeight = tableHeight
-      }
-      if (offsetTop <= Number(this.fixedOffset) + 20 && offsetTop >= 0) {
-        this.$el.querySelector('.bi-table-wrapper>.el-table>.el-table__body-wrapper').style.overflowY = 'auto' // el-table class
-      } else {
-        this.$el.querySelector('.bi-table-wrapper>.el-table>.el-table__body-wrapper').style.overflowY = 'hidden' // el-table class
-      }
-    },
-    getElementTop(element) {
-      let actualTop = element.offsetTop
-      let current = element.offsetParent
-
-      while (current !== null) {
-        actualTop += current.offsetTop
-        current = current.offsetParent
-      }
-      return actualTop
-    }
-  }
-}
-</script>
+<template>
+  <div class="bi-table">
+    <div class="bi-table-wrapper">
+      <el-table
+        ref="elTable"
+        :data="data"
+        :max-height="maxHeight"
+        v-bind="$attrs"
+        v-on="$listeners"
+      >
+        <template v-for="item in tbColumns">
+          <el-table-column
+            v-if="item.slotScope"
+            :key="item.prop+item.label"
+            v-bind="item"
+            v-on="$listeners"
+          >
+            <template slot-scope="scope">
+              <slot
+                :name="item.prop"
+                v-bind="scope"
+              ></slot>
+            </template>
+          </el-table-column>
+
+          <bi-column
+            v-else
+            :key="item.prop+item.label"
+            v-bind="$attrs"
+            :column="item"
+          />
+        </template>
+      </el-table>
+    </div>
+    <template v-if="pagination">
+      <pagination
+        v-if="data.length > 0"
+        v-bind="$attrs"
+        v-on="$listeners"
+      />
+    </template>
+  </div>
+</template>
+
+<script>
+import BiColumn from './columu'
+import Pagination from '../Pagination'
+
+export default {
+  name: 'BiTable',
+  components: {
+    Pagination,
+    BiColumn
+  },
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    column: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    columnsProps: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    pagination: {
+      type: Boolean,
+      default: false
+    },
+    fixed: {
+      type: String,
+      default: ''
+    },
+    fixedOffset: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      maxHeight: null
+    }
+  },
+  computed: {
+    tbColumns() {
+      const { column, columnsProps: props } = this
+      return column.map((col) => {
+        const it = Object.assign({}, props, col)
+        return it
+      })
+    },
+    fixedHeader() {
+      return this.fixed
+    }
+  },
+  mounted() {
+    if (this.fixedHeader === 'sticky') {
+      window.addEventListener('scroll', this.handleStickyHeader, true)
+    } else if (this.fixedHeader === 'fullscreen') {
+      window.addEventListener('scroll', this.handleFixedHeader, true)
+      // this.maxHeight = 300
+    }
+  },
+  destroyed() {
+    if (this.fixedHeader === 'sticky') {
+      window.removeEventListener('scroll', this.handleStickyHeader, true)
+    } else if (this.fixedHeader === 'fullscreen') {
+      window.removeEventListener('scroll', this.handleFixedHeader, true)
+      // this.maxHeight = 300
+    }
+  },
+  methods: {
+    handleStickyHeader() {
+      // 获取滚动条滚动的高度
+      const scrollTop = document.documentElement.scrollTop
+      // 先获取父盒子的距离顶部的高度，从而算出子盒子的高度。
+
+      const offsetTop = this.getElementTop(this.$el)
+      // 当子盒子距离顶部的距离 小于滚动的高度，使子盒子吸顶。
+
+      if (scrollTop > offsetTop + 30) {
+        // 判断当前是否已经固定。headerStatus优化值 可有可无。
+        if (!this.headerStatus) {
+          this.headerStatus = true
+          // 当前子盒子要在父盒子中横向滚动 所以使用absolute 绝对定位。
+          this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.position = 'absolute'
+          this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '2'
+        }
+        // 绝对定位 top值需要一直改变 所以动态添加top值
+        const top = scrollTop - (offsetTop + 1) + Number(this.fixedOffset)
+        // 中间header
+        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.transform = `translate3d(0px, ${top}px, 0px)`
+        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.position = 'relative'
+
+        // 左边header
+        if (this.$el.querySelector('.el-table__fixed')) {
+          this.$el.querySelector('.el-table__fixed').style.zIndex = '3'
+        }
+        if (this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper')) {
+          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, ${top}px, 0px)`
+          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.zIndex = '4'
+        }
+
+        // 右边header
+        if (this.$el.querySelector('.el-table__fixed-right')) {
+          this.$el.querySelector('.el-table__fixed-right').style.zIndex = '4'
+        }
+        if (this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper')) {
+          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, ${top}px, 0px)`
+          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.zIndex = '4'
+        }
+      } else {
+        this.headerStatus = false
+        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.position = 'relative'
+        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.transform = `translate3d(0px, 0px, 0px)`
+
+        if (this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper')) {
+          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.zIndex = `3`
+          this.$el.querySelector('.el-table__fixed .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, 0px, 0px)`
+        }
+        if (this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper')) {
+          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.zIndex = `3`
+          this.$el.querySelector('.el-table__fixed-right .el-table__fixed-header-wrapper').style.transform = `translate3d(0px, 0px, 0px)`
+        }
+        this.$el.getElementsByClassName('el-table__header-wrapper')[0].style.zIndex = '3'
+        this.$el.getElementsByClassName('el-table__body-wrapper')[0].style.paddingTop = '0'
+      }
+    },
+    handleFixedHeader() {
+      // const scrollTop = document.documentElement.scrollTop
+      const offsetTop = this.$el.getBoundingClientRect().top // el-table 父级div
+      const tableHeight = window.innerHeight - Number(this.fixedOffset) - (this.pagination ? 72 : 0)
+      if (Math.abs(tableHeight - this.maxHeight) > 3) {
+        this.maxHeight = tableHeight
+      }
+      if (offsetTop <= Number(this.fixedOffset) + 20 && offsetTop >= 0) {
+        this.$el.querySelector('.bi-table-wrapper>.el-table>.el-table__body-wrapper').style.overflowY = 'auto' // el-table class
+      } else {
+        this.$el.querySelector('.bi-table-wrapper>.el-table>.el-table__body-wrapper').style.overflowY = 'hidden' // el-table class
+      }
+    },
+    getElementTop(element) {
+      let actualTop = element.offsetTop
+      let current = element.offsetParent
+
+      while (current !== null) {
+        actualTop += current.offsetTop
+        current = current.offsetParent
+      }
+      return actualTop
+    }
+  }
+}
+</script>