bi-element-ui 1.1.96 → 1.1.98

package/src/components/BiTable/forced.js

@@ -1,63 +1,63 @@
-// 这些选项不应该被覆盖
-export default {
-  selection: {
-    renderHeader: function (h, { store }) {
-      return <el-checkbox disabled={store.states.data && store.states.data.length === 0} indeterminate={store.states.selection.length > 0 && !this.isAllSelected} nativeOn-click={this.toggleAllSelection} value={this.isAllSelected} />
-    },
-    renderCell: function (h, { row, column, store, $index }) {
-      return (
-        <el-checkbox
-          nativeOn-click={(event) => event.stopPropagation()}
-          value={store.isSelected(row)}
-          disabled={column.selectable ? !column.selectable.call(null, row, $index) : false}
-          on-input={() => {
-            store.commit('rowSelectedChanged', row)
-          }}
-        />
-      )
-    },
-    sortable: false,
-    resizable: false
-  },
-  index: {
-    renderHeader: function (h, { column }) {
-      return column.label || '#'
-    },
-    renderCell: function (h, { $index, column }) {
-      let i = $index + 1
-      const index = column.index
-
-      if (typeof index === 'number') {
-        i = $index + index
-      } else if (typeof index === 'function') {
-        i = index($index)
-      }
-
-      return <div>{i}</div>
-    },
-    sortable: false
-  },
-  expand: {
-    renderHeader: function (h, { column }) {
-      return column.label || ''
-    },
-    renderCell: function (h, { row, store }) {
-      const classes = ['el-table__expand-icon']
-      if (store.states.expandRows.indexOf(row) > -1) {
-        classes.push('el-table__expand-icon--expanded')
-      }
-      const callback = function (e) {
-        e.stopPropagation()
-        store.toggleRowExpansion(row)
-      }
-      return (
-        <div class={classes} on-click={callback}>
-          <i class="el-icon el-icon-arrow-right"></i>
-        </div>
-      )
-    },
-    sortable: false,
-    resizable: false,
-    className: 'el-table__expand-column'
-  }
-}
+// 这些选项不应该被覆盖
+export default {
+  selection: {
+    renderHeader: function (h, { store }) {
+      return <el-checkbox disabled={store.states.data && store.states.data.length === 0} indeterminate={store.states.selection.length > 0 && !this.isAllSelected} nativeOn-click={this.toggleAllSelection} value={this.isAllSelected} />
+    },
+    renderCell: function (h, { row, column, store, $index }) {
+      return (
+        <el-checkbox
+          nativeOn-click={(event) => event.stopPropagation()}
+          value={store.isSelected(row)}
+          disabled={column.selectable ? !column.selectable.call(null, row, $index) : false}
+          on-input={() => {
+            store.commit('rowSelectedChanged', row)
+          }}
+        />
+      )
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader: function (h, { column }) {
+      return column.label || '#'
+    },
+    renderCell: function (h, { $index, column }) {
+      let i = $index + 1
+      const index = column.index
+
+      if (typeof index === 'number') {
+        i = $index + index
+      } else if (typeof index === 'function') {
+        i = index($index)
+      }
+
+      return <div>{i}</div>
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader: function (h, { column }) {
+      return column.label || ''
+    },
+    renderCell: function (h, { row, store }) {
+      const classes = ['el-table__expand-icon']
+      if (store.states.expandRows.indexOf(row) > -1) {
+        classes.push('el-table__expand-icon--expanded')
+      }
+      const callback = function (e) {
+        e.stopPropagation()
+        store.toggleRowExpansion(row)
+      }
+      return (
+        <div class={classes} on-click={callback}>
+          <i class="el-icon el-icon-arrow-right"></i>
+        </div>
+      )
+    },
+    sortable: false,
+    resizable: false,
+    className: 'el-table__expand-column'
+  }
+}

package/src/components/BiTable/index.js

@@ -1,6 +1,6 @@
-import BiTable from './table.vue'
-
-BiTable.install = function (Vue) {
-  Vue.component(BiTable.name, BiTable)
-}
-export default BiTable
+import BiTable from './table.vue'
+
+BiTable.install = function (Vue) {
+  Vue.component(BiTable.name, BiTable)
+}
+export default BiTable

package/src/components/BiTable/render.vue

@@ -1,13 +1,13 @@
-<script>
-export default {
-  name: 'BiRender',
-  functional: true,
-  props: {
-    scope: Object,
-    render: Function
-  },
-  render: (h, ctx) => {
-    return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
-  }
-}
-</script>
+<script>
+export default {
+  name: 'BiRender',
+  functional: true,
+  props: {
+    scope: Object,
+    render: Function
+  },
+  render: (h, ctx) => {
+    return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
+  }
+}
+</script>

package/src/components/BiTable/table.vue

@@ -1,179 +1,179 @@
-<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>