@kyfe/ks-query-table 0.0.21 → 0.0.22

package/src/view/home/query-table/components/pe-table/index.vue

@@ -0,0 +1,847 @@
+<template>
+  <div class="pe-table-wrap"
+       ref="root"
+       :style="rootStyle"
+       :class="rootClassName">
+    <div ref="container"
+         class="pe-table-container">
+      <div ref="trackX"
+           class="pe-table-scrollbar_horizontal-track"
+           :style="state.trackXStyle">
+        <div ref="thumbX"
+             class="pe-table-scrollbar_horizontal-thumb"
+             :class="scrollbarClass" />
+      </div>
+      <div ref="trackY"
+           class="pe-table-scrollbar_vertical-track"
+           :style="state.trackYStyle">
+        <div ref="thumbY"
+             class="pe-table-scrollbar_vertical-thumb"
+             :class="scrollbarClass" />
+      </div>
+      <Empty v-if="isEmpty"
+             :isAbnormal="isAbnormal"
+             :headerTotalHeight="headerTotalHeight"
+             :emptyText="emptyText"
+             @abnormal="abnormal"></Empty>
+      <TableLoading v-if="isLoading"
+                    :delayLoading="delayLoading"
+                    :headerTotalHeight="headerTotalHeight" />
+      <TableTotal v-if="isScrollShowTotal"
+                  :show="isShowTotal"
+                  :totalOffset="totalOffset"
+                  :endRow="state.showEndRow"
+                  :total="curMaxIndexVal || total" />
+      <div ref="loadMroe"
+           class="load-more"
+           v-if="!isEmpty && !isLoading && isHasOffsetY && !isDataChange">
+        <LoadMore :isLoadFinished="isLoadFinished"
+                  :loadOptions="loadOptions">
+          <slot name="loadMroe"></slot>
+        </LoadMore>
+      </div>
+      <div class="pe-table-resize_line"
+           style="display: none;">
+        <div class="pe-table-resize_line-thumb"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import Vue from 'vue'
+const Vue = window.Vue // 在此项目中，Vue使用的是public下的运行时的vue.reuntime.min.js。所以此时需要保持一致
+import debounce from 'lodash/debounce'
+import throttle from 'lodash/throttle'
+import CollapseMixin from './collapse.js'
+import Empty from './empty.vue'
+import LoadMore from './load-more'
+import { PE_TABLE_PROPS } from './props/index.js'
+import Row from './row.vue'
+import ScrollbarMixin from './scrollbar.js'
+import TableLoading from './table-loading.vue'
+import TableTotal from './table-total.vue'
+import { createColumns, createFlatColumns, createRenderColumnOption } from './utils/columns.js'
+import { createTableData } from './utils/data'
+import { getRenderRange } from './utils/tools.js'
+import { TouchScrolling } from './utils/touch-scroll.js'
+const RowConstructor = Vue.extend(Row)
+
+export default {
+  name: 'PeTable',
+  mixins: [ScrollbarMixin, CollapseMixin],
+  props: PE_TABLE_PROPS,
+  components: {
+    Empty,
+    LoadMore,
+    TableLoading,
+    TableTotal,
+  },
+  computed: {
+    headerTotalHeight() {
+      return this.maxLevel * this.$props.headerRowHeight
+    },
+    scrollbarClass() {
+      if (this.$props.autoHideScrollbars) {
+        return [this.isScrolling ? 'visible' : 'hidden']
+      } else {
+        return ['visible']
+      }
+    },
+    rootStyle() {
+      return {
+        '--peHScrollbarSize': this.$props.hScrollbarSize + 'PX',
+        '--peVScrollbarSize': this.$props.vScrollbarSize + 'PX',
+      }
+    },
+    isEmpty() {
+      if (!Array.isArray(this.data)) return true
+      return !this.data.length && !this.isLoading
+    },
+    rootClassName() {
+      return {
+        'pe-table-scrolling__x': this.offsetX,
+        'pe-table-show-index': this.$props.showIndex,
+      }
+    },
+    isHasOffsetY() {
+      return this.offsetY > 0
+    },
+  },
+  // 数据必须存在唯一值 默认为id.否则渲染出现问题。。。不存在就生成 默认使用索引值
+  watch: {
+    width() {
+      this.changeSize()
+    },
+    height() {
+      this.changeSize()
+    },
+    scrollX(val) {
+      this.touchScroll.setScroll('unScrollX', !val)
+    },
+    scrollY(val) {
+      this.touchScroll.setScroll('unScrollY', !val)
+    },
+    isShowHorizontal(val) {
+      this.touchScroll.setScroll('isShowHorizontal', val)
+    },
+    columns: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.flatColumns()
+        this.updateColumns()
+        this.updateTableData()
+        this.$nextTick(() => {
+          this.createHeader()
+          this.renderViewportCells()
+          if (this.isUpdateOffset) {
+            this.scrollToLeft()
+            this.scrollToTop()
+          }
+        })
+      },
+    },
+    data: {
+      handler() {
+        this.updateRender()
+      },
+    },
+    headerTotalHeight() {
+      this.$nextTick(() => {
+        this.refreshThumb()
+      })
+    },
+  },
+  data() {
+    this.rowComponentMap = {}
+    return {
+      state: {
+        endRow: 0, // 可视区域内渲染的结束行
+        startRow: 0, // 可视区域的开始行
+        showEndRow: 0, // 用户可见的最后一行
+        rowOffset: 0, // 偏移量
+
+        startCell: 0, // 可视区域的开始单元格
+        endCell: 0, // 可是区域内的结束单元格
+
+        scrollableHeight: 0, // 纵向滚动条高度
+        tableHeight: 0, // 表格高度
+        thumbOffsetY: 0, // 纵向滚动条偏移值
+        thumbSizeY: 0,
+        trackYStyle: {
+          // 纵向滚动条的样式
+          right: 0,
+          opacity: 1,
+        },
+        trackXStyle: {
+          opacity: 1,
+        },
+
+        scrollableWidth: 0, // 横向滚动条宽度
+        tableWidth: 0, // 表格宽度
+        thumbOffsetX: 0,
+        thumbSizeX: 0,
+
+        rowsPerViewport: 0, // 缓冲区的行
+      },
+      viewportWidth: window.innerWidth, // 可视区域宽度
+      // 可视区域高度
+      viewportHeight: window.innerHeight - this.$props.columns.length * this.$props.rowHeight,
+      offsetY: 0, // 纵向偏移值
+      offsetX: 0, // 水平偏移值
+      // windowHeight: window.innerHeight, //
+      // windowWidth: window.innerWidth,
+      mainColumns: [], // 所有列配置，包含左侧固定列
+      renderCellsColumns: [], // 表体单元格渲染的列集合
+      maxLevel: 1, // 最大层级，存在多级表头时则是children的递归集合
+      tableData: [], // 表格数据，仅存在渲染的列的数据
+
+      // 排序相关参数
+      sortMap: {
+        order: undefined, // 排序方式
+        key: undefined, // 排序的列的key
+        column: undefined, // 排序的列
+      },
+      collapsedMap: {},
+      visibility: true,
+      activate: false,
+      loadMoreHeight: 0,
+      isShowTotal: false,
+      timerMore: null,
+      isDataChange: false // 数据正在变化
+    }
+  },
+  mounted() {
+    this.init()
+  },
+  beforeDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect()
+      this.resizeObserver = null
+    }
+    // window.removeEventListener('resize', this.throttleHandleResize)
+  },
+  activated() {
+    /*
+        释放掉，存在一个页面多个表格，路由回来A表格从新被activate挂起，handleVisibility没有走，
+        B表格这时候也会被activate = true给锁死，导致没办法更新白屏问题，比如一个页面存在tabs的场景
+      */
+    const isVisible = this.isVisible()
+    if (isVisible) {
+      this.activate = true
+    }
+  },
+  methods: {
+    init() {
+      let $container = this.$refs.container
+      this.changeSize()
+      this.resizeObserver = new ResizeObserver(this.handleVisibility)
+      this.resizeObserver.observe($container)
+      this.scrollbar = this.$refs.scrollbar
+      this.touchScroll = new TouchScrolling($container, {
+        unScrollY: !this.scrollY,
+        unScrollX: !this.scrollX,
+        isShowHorizontal: this.isShowHorizontal,
+        handlerTouchStar: () => {
+          this.$emit('scrollTouchstar', {
+            scrollTop: this.offsetY,
+          })
+        },
+        handlerTouchend: finaloffsetY => {
+          // 因为当刻所获取的offsetY 并不准确, 前后多的行数数据作为冗余值提前加载
+          const rowHeight = this.$props.rowHeight
+          let startRow = Math.floor((this.offsetY + finaloffsetY) / rowHeight)
+          const numRows = this.tableData.length
+          const rowsPerViewport = this.state.rowsPerViewport
+          const endRow = Math.min(startRow + rowsPerViewport * 2, numRows)
+          // 把其实行设置为当前行，前后多的行数数据作为冗余值提前加载
+          startRow = Math.floor(this.offsetY / rowHeight)
+          this.$emit('scrollTouchend', {
+            startRow,
+            endRow,
+            rowsPerViewport,
+          })
+        },
+        handlerTouchmove: () => {},
+        handlerScrollEnd: parmas => {
+          if (!this.$props.isSorbentColumm) return
+          if (parmas.y === 0) {
+            const state = this.getState()
+            const scrollX = this.offsetX
+            const width = this.getViewportWidth()
+            if (Math.abs(state.tableWidth - width - scrollX) < 2) {
+              return
+            }
+            const fixedList = this.mainColumns.filter(col => col.fixed === 'left' || col.fixed)
+            const fixedWidth = fixedList.reduce((acc, col) => acc + col.width, 0) // 计算左边固定距离
+            // 非固定和非group的列
+            const noFixedAndParentsColums = this.mainColumns.filter(item => item.children.length === 0 && !item.fixed)
+            for (let i = 0; i < noFixedAndParentsColums.length - 1; i++) {
+              const beginOffsetX = noFixedAndParentsColums[i].offsetX - fixedWidth
+              const endOffsetX = noFixedAndParentsColums[i + 1].offsetX - fixedWidth
+              // 滚动距离在滑动距离之内，离哪个近，则吸附相近的列
+              if (beginOffsetX <= scrollX && scrollX <= endOffsetX) {
+                const isNextColumn = endOffsetX - scrollX < scrollX - beginOffsetX
+                const scrollToColumnKey = noFixedAndParentsColums[isNextColumn ? i + 1 : i].key
+                this.scrollToColumn(scrollToColumnKey, 0, 300)
+                break
+              }
+            }
+          }
+        },
+        handlerBeforeAnimation: isYAndDownToTop => {
+          const isBottom = this.offsetY + this.viewportHeight > this.state.tableHeight
+          if (isYAndDownToTop && isBottom) {
+            this.scrollHiddenMore()
+          }
+          return isBottom
+        },
+      })
+      this.renderViewportRows()
+      this.createHeader()
+    },
+    updateRender() {
+      // if (this.columns && !this.mainColumns.length) {
+      // }
+      // this.updateTableData()
+      // this.curMaxIndexVal = this.tableData.length
+      // this.updateColumnsIndexWidth()
+      // this.$nextTick(() => {
+      //   // 数据变化之后，y轴归零
+      //   if (this.$props.autoResetScrollTop) {
+      //     // 重置滚动位置
+      //     this.scrollToTop()
+      //   } else {
+      //     this.renderViewportRows()
+      //   }
+      //   // 滚动条发生改变
+      //   this.refreshThumb()
+      // })
+      this.isDataChange = true
+      this.updateTableData()
+      this.curMaxIndexVal = this.tableData.length
+      this.updateColumnsIndexWidth()
+      // 数据变化之后，y轴归零
+      // todo 外部主动调用回到顶部？
+      // if (this.$props.autoResetScrollTop) {
+      //   // 重置滚动位置
+      //   this.scrollToTop()
+      // } else {
+        this.renderViewportRows()
+      // }
+      this.$nextTick(() => {
+        // 滚动条发生改变
+        this.refreshThumb()
+        this.renderViewportCells()
+        this.scrollHiddenMoreIfNeeded(true, 0)
+        this.isDataChange = false
+      })
+    },
+    flatColumns() {
+      const { collapsedMap, visibleFlatColumns } = createFlatColumns({
+        columns: this.columns,
+        rowCellRender: this.$props.rowCellRender,
+        headerCellRender: this.$props.headerCellRender,
+        showIndex: this.$props.showIndex,
+      })
+      this.collapsedMap = collapsedMap
+      this.visibleFlatColumns = visibleFlatColumns
+    },
+    updateColumnsIndexWidth() {
+      const indexCol = String(this.curMaxIndexVal).length * 10
+      const indexColumn = this.mainColumns.find(column => column.key === '$index')
+      if (indexColumn && indexColumn.width !== indexCol) {
+        this.updateColumns()
+      }
+    },
+    updateColumns() {
+      const { columns, maxLevel } = createColumns({
+        visibleFlatColumns: this.visibleFlatColumns,
+        collapsedMap: this.collapsedMap,
+        rowKey: this.$props.rowKey,
+        headerRowHeight: this.$props.headerRowHeight,
+        curMaxIndexVal: this.curMaxIndexVal,
+      })
+      this.maxLevel = maxLevel
+      this.mainColumns = columns
+      // this.collapseKeysMap = collapseKeysMap
+    },
+    updateTableData() {
+      const params = {
+        data: this.$props.data,
+        columns: this.visibleFlatColumns,
+        rowKey: this.$props.rowKey,
+        pageForIndex: this.pageForIndex,
+        showPage: this.showPage
+      }
+      this.tableData = createTableData(params, this.$props.indexFormat)
+    },
+    isVisible() {
+      const status = this.$el && this.$el.checkVisibility && this.$el.checkVisibility()
+      return status === undefined ? this.$el.offsetParent !== null : status
+    },
+    handleVisibility() {
+      // 在A页面切换到B页面，B页面这时候属于一个激活状态，不需要重新计算
+      if (this.activate) {
+        this.activate = false
+        return
+      }
+      const isVisible = this.isVisible()
+      if (!isVisible) {
+        this.visibility = false
+      }
+      if (this.visibility === false && isVisible) {
+        this.visibility = true
+        this.onResize()
+      }
+    },
+    changeSize() {
+      // 表格被隐藏。不应该被计算
+      const isVisible = this.isVisible()
+      if (!isVisible) {
+        this.visibility = false
+        return
+      }
+      const width = this.getViewportWidth()
+      const height = this.getViewportHeight()
+      this.viewportWidth = width
+      this.viewportHeight = height
+      this.$refs.container.style.width = width + 'PX'
+      this.$refs.container.style.height = height + 'PX'
+      this.$refs.root.style.width = width + 'PX'
+      this.$refs.root.style.height = height + 'PX'
+      this.$nextTick(() => {
+        this.renderViewportRows()
+        this.renderViewportCells()
+        this.refreshThumb()
+      })
+    },
+    // 修改 getViewportHeight 方法
+    getViewportHeight() {
+      // 计算实际内容高度
+      const contentHeight = this.$props.rowHeight * this.tableData.length + this.headerTotalHeight
+      // 如果有设置最大高度，取较小值
+      if (this.$props.maxHeight) {
+        return Math.min(contentHeight, parseInt(this.$props.maxHeight))
+      }
+
+      // 原有逻辑保持不变
+      if (this.$props.height) {
+        return parseInt(this.$props.height)
+      }
+      return this.$refs.container.clientHeight
+    },
+    getViewportWidth() {
+      if (this.$props.width) {
+        return parseInt(this.$props.width)
+      }
+      return this.$refs.container.clientWidth
+    },
+    getState() {
+      const numRows = this.tableData.length
+      // 增加行渲染的冗余,保证触底时的效果
+      const rowsPerViewport = Math.ceil((this.viewportHeight - this.headerTotalHeight) / this.$props.rowHeight) + 1
+      const tableHeight = numRows * this.$props.rowHeight + this.headerTotalHeight
+      const mainColumns = this.mainColumns
+      const { tableWidth, renderCellsColumns, renderCellsColumnsWidths } = createRenderColumnOption({
+        mainColumns,
+        maxLevel: this.maxLevel,
+        headerRowHeight: this.$props.headerRowHeight,
+      })
+
+      // 为什么这里还需要再算一次？因为如果直接把父节点的子节点都塞进去，那么子节点就会全部渲染，子节点个数得不到渲染。
+      // 所以这里还需要再算一次。
+      const { startIndex: startCell, endIndex: endCell } = getRenderRange(this.offsetX, this.viewportWidth, renderCellsColumnsWidths)
+      this.renderCellsColumns = renderCellsColumns
+
+      const startRow = Math.floor(this.offsetY / this.$props.rowHeight)
+      const endRow = Math.min(startRow + rowsPerViewport, numRows)
+      // const showRowsPerViewport = Math.max(0, rowsPerViewport - 1)
+      // const showEndRow = Math.min(startRow + showRowsPerViewport, numRows)
+      const tableHeightNoHeader = this.offsetY + this.viewportHeight - this.headerTotalHeight
+      // const showEndRow = Math.min(Math.ceil(tableHeightNoHeader / this.$props.rowHeight ), numRows)
+      const showEndRow = Math.min(Math.floor((tableHeightNoHeader + this.$props.rowHeight / 2) / this.$props.rowHeight), numRows)
+      const rowOffset = -Math.floor(this.offsetY % this.$props.rowHeight)
+
+      // 滚动条的计算逻辑
+      const scrollableHeight = Math.max(tableHeight - this.viewportHeight, 0)
+      const scrollThumbYPct = tableHeight === 0 ? 1 : 0.97 * Math.sqrt(this.viewportHeight / tableHeight) + 0.03
+      const thumbSizeY = Math.round(Math.max(Math.min(scrollThumbYPct * this.viewportHeight, this.viewportHeight), 0))
+      let thumbOffsetY
+      if (scrollableHeight === 0) {
+        thumbOffsetY = 0
+      } else {
+        thumbOffsetY = (this.offsetY / scrollableHeight) * this.viewportHeight - thumbSizeY * (this.offsetY / scrollableHeight)
+      }
+      const scrollableWidth = Math.max(tableWidth - this.viewportWidth, 0)
+      const scrollThumbXPct = tableWidth === 0 ? 100 : this.viewportWidth / tableWidth
+      const thumbSizeX = Math.round(Math.max(Math.min(scrollThumbXPct * this.viewportWidth, this.viewportWidth), 30))
+      const thumbOffsetX = (this.offsetX / scrollableWidth) * this.viewportWidth - thumbSizeX * (this.offsetX / scrollableWidth)
+      const trackYStyle = {
+        right: Math.max(0, this.viewportWidth - tableWidth) + 'px',
+        opacity: tableHeight > this.viewportHeight ? 1 : 0,
+      }
+      const trackXStyle = {
+        opacity: tableWidth > this.viewportWidth && numRows ? 1 : 0,
+      }
+      if (this.state != null) {
+        this.state.showEndRow = showEndRow
+        this.state.endRow = endRow
+        this.state.startRow = startRow
+        this.state.rowOffset = rowOffset + this.headerTotalHeight
+
+        this.state.startCell = startCell
+        this.state.endCell = endCell
+
+        this.state.scrollableHeight = scrollableHeight
+        this.state.tableHeight = tableHeight
+        this.state.thumbOffsetY = thumbOffsetY
+        this.state.thumbSizeY = thumbSizeY
+
+        this.state.scrollableWidth = scrollableWidth
+        this.state.tableWidth = tableWidth
+        this.state.thumbOffsetX = thumbOffsetX
+        this.state.thumbSizeX = thumbSizeX
+        this.state.trackYStyle = trackYStyle
+        this.state.trackXStyle = trackXStyle
+
+        this.state.rowsPerViewport = rowsPerViewport
+        return this.state
+      }
+      const state = {
+        showEndRow,
+        endRow,
+        startRow,
+        rowOffset,
+
+        startCell,
+        endCell,
+
+        scrollableHeight,
+        tableHeight,
+        thumbOffsetY,
+        thumbSizeY,
+
+        scrollableWidth,
+        tableWidth,
+        thumbOffsetX,
+        thumbSizeX,
+
+        rowsPerViewport,
+        trackYStyle,
+        trackXStyle,
+      }
+      this.state = state
+      return state
+    },
+    throttleHandleResize: throttle(function () {
+      this.onResize()
+    }, 30),
+    onResize() {
+      this.changeSize()
+      this.setScrollOffsetY(this.offsetY)
+      this.setScrollOffsetX(this.offsetX)
+    },
+    setScrollToLoadMore() {
+      const { scrollableHeight } = this.state
+      // 开启了加载更多并且再接近最后一屏进行位置的设置,并回调加载更多函数
+      // 有表格高度，并且非加载完成,且滚动到需要触发的距离
+      if (this.enableLoadMore && !this.isLoadFinished && scrollableHeight - this.offsetY <= this.loadOptions.offset) {
+        // console.log('触发 loadMore, 距离底部距离：', scrollableHeight - this.offsetY)
+        this.callbackLoadMore()
+      }
+      this.setLoadMroeOffset()
+    },
+    // 设置加载更多组件的位置
+    async setLoadMroeOffset() {
+      const { startRow, rowsPerViewport, rowOffset } = this.state
+      // 为了减少过度计算,判断在末屏才进行计算
+      let dataCount = this.data.length
+      let offset = -9999
+      if (startRow >= dataCount - rowsPerViewport) {
+        this.getLoadmoreHeight()
+        // 把加载更多当作最后一行计算起始位置
+        offset = rowOffset + (dataCount - startRow) * this.$props.rowHeight
+      } else {
+        offset = -9999
+      }
+      await this.$nextTick()
+      let $loadMore = this.$refs.loadMroe
+      if ($loadMore) {
+        $loadMore.style.transform = `translateY(${offset}px)`
+      }
+    },
+    // 获取该组件高度
+    getLoadmoreHeight() {
+      if (!this.loadMoreHeight && this.$refs.loadMroe) {
+        this.loadMoreHeight = this.$refs.loadMroe.offsetHeight || 0
+      }
+    },
+    callbackLoadMore: throttle(function () {
+      this.$emit('loadMore')
+    }, 100),
+    clearSortMap() {
+      this.sortMap = {
+        order: undefined, // 排序方式
+        key: undefined, // 排序的列的key
+        column: undefined, // 排序的列
+      }
+    },
+    renderViewportRows() {
+      if (!this.sortMap.order && this.defaultSort.order) {
+        this.sortMap.order = this.defaultSort.order
+        this.sortMap.key = this.defaultSort.key
+      }
+      // 获取渲染需要的对象
+      const state = this.getState()
+      // 渲染对象集合以id为key
+      const renderRows = {}
+      // rowsArr 只有在$props.data 在watch监听发生变更时，才会更新，遇到单元格渲染异常时，优先考虑此变量异常
+      const rowsArr = this.tableData
+      // 当前渲染的行
+      for (let i = state.startRow; i < state.endRow; i++) {
+        const rowId = rowsArr[i][this.$props.rowKey]
+        renderRows[rowId] = true
+      }
+      // 需要移出的行
+      const removeRows = []
+      // 遍历复用的组件对象
+      for (const id in this.rowComponentMap) {
+        // 存在与渲染的，跳过
+        if (id in renderRows) {
+          continue
+        }
+        // 否则记录在需要移出的行
+        const rowComponent = this.rowComponentMap[id]
+        removeRows.push(rowComponent)
+      }
+      const columns = this.renderCellsColumns || []
+      for (let i = state.startRow; i < state.endRow; i++) {
+        let row = rowsArr[i]
+        let originRowData = this.$props.data[i]
+        // 行数据不存在跳过
+        if (row == null) {
+          // eslint-disable-next-line
+          console.error('cannot find row', i)
+          continue
+        }
+        const rowId = row[this.$props.rowKey]
+        const cells = columns.reduce((obj, col, index) => {
+          obj[index] = {
+            [col.key]: originRowData[col.key],
+            id: `${rowId}_${i}_${col.key}_ ${index}`,
+          }
+          if (col.key === '$index') {
+            obj[index][col.key] = row[col.key]
+          }
+          return obj
+        }, [])
+        // 每一行的行高之间的偏移值
+        const offset = state.rowOffset + (i - state.startRow) * this.$props.rowHeight
+        const rowParams = {
+          rowIndex: i,
+          id: rowId, // 行数据中的唯一值
+          cells, // 行内的列的数据集合
+          rowData: row, // 行数据
+          offset, // 偏移量。这里是等高。暂不支持动态
+          rowHeight: this.$props.rowHeight, // 行高
+          type: 'row', // 行组件类型。渲染表头行和表体行
+          columns,
+          originRowData,
+        }
+        // 是否为已存在的的行组件
+        const existingRow = this.rowComponentMap[rowId]
+        // 存在直接改偏移值
+        if (existingRow != null) {
+          existingRow.reuse(rowParams)
+          existingRow.renderCells()
+          continue
+        }
+        // 需要移除的行数据。但是此处可复用行组件。
+        const reuseRow = removeRows.pop()
+        if (reuseRow != null) {
+          // 每个行组件都存在id属性。id的值为行数据必须唯一，为了检查是否复用，更新，或删除
+          delete this.rowComponentMap[reuseRow.id]
+          reuseRow.reuse(rowParams)
+          reuseRow.renderCells()
+          this.rowComponentMap[rowId] = reuseRow
+          continue
+        }
+        // 新增的行组件
+        const rowComponent = new RowConstructor({
+          el: document.createElement('div'),
+        })
+        // 行组件设置对应的属性
+        rowComponent.grid = this // 父组件实例
+        for (let prop in rowParams) {
+          rowComponent[prop] = rowParams[prop]
+        }
+        // rowComponent.renderCells()
+        // 直接追加到容器的dom中。不走vue的虚拟dom，减少计算开销
+        this.$refs.container.appendChild(rowComponent.$el)
+        this.rowComponentMap[rowId] = rowComponent
+      }
+      // 销毁并移出不需要的行
+      for (const rowComponent of removeRows) {
+        rowComponent.destroy() // 销毁
+        delete this.rowComponentMap[rowComponent.id] // 销毁内存中的行组件
+      }
+      // 渲染行之后看是否需要处理加载更多组件的位置
+      this.setScrollToLoadMore()
+    },
+    renderViewportCells() {
+      const state = this.getState()
+      // 更新视口区域的行组件
+      for (let i = state.startRow; i < state.endRow; i++) {
+        let row = this.tableData[i]
+        const rowId = row[this.$props.rowKey]
+        let rowComponent = this.rowComponentMap[rowId]
+        if (!rowComponent) {
+          // console.error('row should exist. did you render rows first?')
+          continue
+        }
+        // 更新行内的列（单元格）组件
+        rowComponent.renderCells.call(rowComponent)
+      }
+      this.headersComponent && this.headersComponent.renderCells()
+      // for (const row of Object.values(this.headerRows)) {
+      //   row.renderCells.call(row)
+      // }
+    },
+    createHeader() {
+      this.getState()
+      if (this.headersComponent) {
+        // 存在时，直接销毁头。
+        this.$refs.container.removeChild(this.headersComponent.$el)
+        this.headersComponent.$destroy()
+      }
+      let offset = 0
+      const HEADER_ID = 'inner_header_in_99999999999999' // very dumb
+      const headersComponent = new RowConstructor({
+        el: document.createElement('div'),
+      })
+      const columns = this.renderCellsColumns
+      // 行数据设置
+      headersComponent.grid = this
+      const headerParams = {
+        id: HEADER_ID,
+        rowHeight: this.headerTotalHeight,
+        cells: columns,
+        columns,
+        offset: offset,
+        type: 'header',
+      }
+      for (let prop in headerParams) {
+        headersComponent[prop] = headerParams[prop]
+      }
+      // 直接追加到容器的dom中。不走vue的虚拟dom，减少计算开销
+      this.$refs.container.appendChild(headersComponent.$el)
+      this.headersComponent = headersComponent
+    },
+
+    handleEvent(event, params) {
+      const { name, ...reset } = params
+      this.$emit(name, { event, ...reset })
+    },
+
+    // 排序操作
+    sortChange(column) {
+      const execulteHanlder = () => {
+        if (!this.sortMap.order) {
+          this.sortMap.order = 'ascending'
+        } else {
+          this.sortMap.order = this.sortMap.order === 'ascending' ? 'descending' : 'ascending'
+        }
+        this.sortMap.key = column.key
+        // 真实请求用的排序字段，用于实现表格列的展示字段与排序请求字段不同的场景，比如：name 字段展示的列用 code 字段进行排序；
+        // 一般情况下，表格列的展示字段与排序请求字段是一致的，此时可以直接用 sortMap.key 字段
+        this.sortMap.reqKey = (Array.isArray(column.sortKeys) && column.sortKeys[0]) || column.key
+        this.sortMap.column = column.column
+        this.$emit('sort-change', {
+          order: this.sortMap.order,
+          column,
+          prop: this.sortMap.key,
+          reqProp: this.sortMap.reqKey,
+        })
+        this.renderViewportCells()
+      }
+      let fn = this.$props.beforeSort
+      if (fn && typeof fn === 'function') {
+        const beforeSort = fn({
+          column,
+          order: this.sortMap.order,
+          prop: column.key,
+        })
+        if (beforeSort && beforeSort.then) {
+          beforeSort.then(allow => {
+            allow !== false && execulteHanlder()
+          })
+        } else {
+          beforeSort !== false && execulteHanlder()
+        }
+      } else {
+        execulteHanlder()
+      }
+    },
+    // 排序相关操作
+    clearSort() {
+      this.$emit('sort-change', {})
+    },
+    // 断网
+    abnormal() {
+      this.$emit('abnormal')
+    },
+    showTotalView() {
+      const { showEndRow = 0, rowsPerViewport = 0 } = this.state
+      if (showEndRow > rowsPerViewport) {
+        this.isShowTotal = true
+        setTimeout(() => {
+          this.hiddenTotalView()
+        }, 1000)
+      }
+    },
+    hiddenTotalView: debounce(function () {
+      this.isShowTotal = false
+    }, 1000),
+    scrollHiddenMore(duration = 300) {
+      if (this.isLoadingMore) return
+      if (this.timerMore) {
+        this.timerMore = null
+        clearTimeout(this.timerMore)
+      }
+      this.timerMore = setTimeout(async() => {
+        const numRows = this.tableData.length
+        this.scrollToRow(numRows - 1, 0, duration)
+        await this.$nextTick()
+        this.renderViewportCells()
+      }, 0)
+    },
+    scrollHiddenMoreIfNeeded(isYAndDownToTop = true, duration) {
+      const isBottom = this.offsetY + this.viewportHeight > this.state.tableHeight
+      if (isYAndDownToTop && isBottom) {
+        this.scrollHiddenMore(duration)
+      }
+    },
+    cellResize({ columnKey, width } = {}) {
+      const column = this.visibleFlatColumns.find(col => col.key === columnKey)
+      column.width = width
+
+      this.updateColumns()
+      this.createHeader()
+      this.changeSize()
+      this.setScrollOffsetY(this.offsetY)
+      this.setScrollOffsetX(this.offsetX)
+
+      this.$emit('cell-resize', {
+        column,
+        width,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+@import url('./style/index.less');
+</style>