@kyfe/ks-query-table 0.0.22 → 0.0.24

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

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