diff --git a/packages/renderless/src/grid/body/index.ts b/packages/renderless/src/grid/body/index.ts
index 8d57da7061..ff5e9879c1 100644
--- a/packages/renderless/src/grid/body/index.ts
+++ b/packages/renderless/src/grid/body/index.ts
@@ -34,7 +34,9 @@ export const scrollEvent =
     // 滚动处理： 如果存在列固定左侧，同步更新滚动状态；如果存在列固定右侧，同步更新滚动状态。
     const $table = parent
 
-    let { $refs, lastScrollLeft, lastScrollTop, scrollXLoad, scrollYLoad, columnStore } = $table
+    let { $refs } = $table
+    const { lastScrollLeft, lastScrollTop, scrollXLoad, columnStorescrollXLoad, scrollYLoad, columnStore } =
+      $table.state
     let { leftList, rightList } = columnStore
     let { tableBody, tableFooter, tableHeader } = $refs
 
@@ -53,9 +55,9 @@ export const scrollEvent =
 
     // 记录新的滚动位置和时间
     $table.lastScrollTime = Date.now()
-    $table.lastScrollLeft = scrollLeft
-    $table.lastScrollTop = scrollTop
-    $table.scrollDirection = isX ? 'X' : 'Y'
+    $table.state.lastScrollLeft = scrollLeft
+    $table.state.lastScrollTop = scrollTop
+    $table.state.scrollDirection = isX ? 'X' : 'Y'
 
     // 同步滚动条状态，只同步表头(表尾)滚动条状态，冻结列已优化为sticky方式
     syncHeaderAndFooterScroll({ bodyElem, footerElem, headerElem, isX })
diff --git a/packages/renderless/src/grid/body/vue.ts b/packages/renderless/src/grid/body/vue.ts
index 6ed822ac4a..2dcaca94aa 100644
--- a/packages/renderless/src/grid/body/vue.ts
+++ b/packages/renderless/src/grid/body/vue.ts
@@ -15,7 +15,8 @@ export const renderless = (props, context: ISharedRenderlessParamHooks, { vm }):
   onMounted(() => {
     const { $el, $refs } = vm as any
 
-    const { elemStore, dropConfig } = $table
+    const { dropConfig } = $table
+    const { elemStore } = $table.state
     const keyPrefix = 'main-body-'
 
     // 表体第一层div，出现滚动条的dom元素
diff --git a/packages/renderless/src/grid/table/index.ts b/packages/renderless/src/grid/table/index.ts
new file mode 100644
index 0000000000..9f4c404a77
--- /dev/null
+++ b/packages/renderless/src/grid/table/index.ts
@@ -0,0 +1,240 @@
+import { isEmptyObject, isObject } from '../../common/type'
+import { hasChildrenList } from '../utils'
+import GlobalConfig from '../../../../vue/src/grid/src/config'
+import { extend } from '../../../common/object'
+
+/**
+ * some utils
+ */
+const run = (names, $table) => names.forEach((name) => $table[name].apply($table))
+
+/**
+ * computed state
+ */
+
+export const computedCtxMenuOpts =
+  ({ props }) =>
+  () =>
+    extend(true, {}, GlobalConfig.menu, props.contextMenu)
+
+export const computedBodyCtxMenu =
+  ({ state }) =>
+  () => {
+    return state.ctxMenuOpts.body && state.ctxMenuOpts.body.options ? state.ctxMenuOpts.body.options : []
+  }
+
+export const computedCtxMenuList =
+  ({ state }) =>
+  () => {
+    let rest = []
+    state.ctxMenuStore.list.forEach((list) => list.forEach((item) => rest.push(item)))
+    return rest
+  }
+
+export const computedHasFilter =
+  ({ state }) =>
+  () =>
+    state.tableColumn.some((column) => isObject(column.filter) && !isEmptyObject(column.filter))
+
+export const computedHeaderCtxMenu =
+  ({ state }) =>
+  () =>
+    state.ctxMenuOpts.header && state.ctxMenuOpts.header.options ? state.ctxMenuOpts.header.options : []
+
+export const computedIsCtxMenu =
+  ({ state }) =>
+  () =>
+    state.headerCtxMenu.length || state.bodyCtxMenu.length
+
+export const computedIsGroup = (state) => () => state.collectColumn.some((column) => hasChildrenList(column))
+
+export const computedIsResizable =
+  ({ state, props }) =>
+  () =>
+    props.resizable || state.tableFullColumn.some((column) => column.resizable)
+
+export const computedOptimizeOpts =
+  ({ props }) =>
+  () =>
+    extend(true, {}, GlobalConfig.sortConfig, props.sortConfig)
+
+export const computedSortOpts =
+  ({ props }) =>
+  () =>
+    extend(true, {}, GlobalConfig.sortConfig, props.sortConfig)
+
+export const computedTooltipContentOpts =
+  ({ state, props }) =>
+  () => {
+    return extend(
+      true,
+      {
+        content: props.tooltipContent,
+        pre: state.tooltipContentPre, //  pre 元素可定义预格式化的文本
+        placement: 'right',
+        type: props.tooltipConfig.effect ? undefined : 'normal'
+      },
+      props.tooltipConfig
+    )
+  }
+
+export const computedVSize =
+  ({ props, vm }) =>
+  () =>
+    props.size || (vm.$parent && vm.$parent.size) || (vm.$parent && vm.$parent.vSize)
+
+export const computedVaildTipOpts =
+  ({ sate, props }) =>
+  () => {
+    return extend(
+      true,
+      {
+        isArrow: false,
+        placement: 'top',
+        type: 'error',
+        content: sate.validTipContent
+      },
+      props.tooltipConfig
+    )
+  }
+
+export const computedValidOpts =
+  ({ props, vm }) =>
+  () => {
+    const config = Object.assign(
+      { message: 'tooltip' },
+      GlobalConfig.validConfig,
+      vm.$grid?.designConfig?.validConfig,
+      props.validConfig
+    )
+
+    config.isMessageTooltip = config.message === 'tooltip'
+    config.isMessageDefault = config.message === 'default'
+    config.isMessageInline = config.message === 'inline'
+
+    return config
+  }
+
+export const computedTableBodyHeight =
+  ({ state }) =>
+  () =>
+    state.tableBodyHeight === 0 ? 'calc(100% - 36px)' : `${state.tableBodyHeight}px`
+
+// TODO:修改
+export const computedIsThemeTiny =
+  ({ state }) =>
+  () =>
+    state.tinyTheme === 'tiny'
+
+export const computedIsThemeSaas =
+  ({ state }) =>
+  () =>
+    state.tinyTheme === 'saas'
+export const computedIsViewDefault =
+  ({ props }) =>
+  () =>
+    props.view === 'default'
+
+export const computedIsShapeTable =
+  ({ state, props, vm }) =>
+  () =>
+    // 表格处于默认视图或mf视图大屏时显示为普通表格；其它视图都显示为多端形式
+    state.isViewDefault || (props.viewType === V_MF && vm.$grid.currentBreakpoint !== 'default')
+
+export const computedColumnNames =
+  ({ props }) =>
+  () => {
+    const customColumnNames = props.customColumnNames
+    const columnNames = [GlobalConfig.defaultColumnName]
+
+    const pushIfNot = (columnName) => {
+      if (typeof columnName === 'string' && !columnNames.includes(columnName)) {
+        columnNames.push(columnName)
+      }
+    }
+
+    if (Array.isArray(customColumnNames) && customColumnNames.length > 0) {
+      customColumnNames.forEach(pushIfNot)
+    } else if (typeof customColumnNames === 'string') {
+      pushIfNot(customColumnNames)
+    }
+
+    return columnNames
+  }
+
+/**
+ * Component Methods
+ */
+export const getParentElem =
+  ({ vm }) =>
+  () => {
+    const $el = vm.$grid ? vm.$grid.$el : vm.$el
+    return $el.parentNode
+  }
+
+// TODO:修改
+export const updateParentHeight =
+  ({ state, vm, api }) =>
+  () => {
+    if (vm.$grid) {
+      vm.$grid.updateParentHeight()
+    } else {
+      state.parentHeight = api.getParentElem().clientHeight
+    }
+  }
+
+export const getParentHeight =
+  ({ state }) =>
+  () => {
+    return state.parentHeight
+  }
+
+// TODO:修改
+export const clearAll =
+  ({ state, vm }) =>
+  (silent) => {
+    const { fetchOption = {} } = vm.$grid
+    const { isReloadFilter } = fetchOption
+
+    run(['clearScroll', 'clearSort', 'clearCurrentRow', 'clearCurrentColumn'], this)
+    run(['clearSelection', 'clearRowExpand', 'clearTreeExpand'], this)
+
+    if (typeof isReloadFilter === 'undefined' ? TINYGrid._filter : !isReloadFilter) {
+      vm.clearFilter(silent)
+    }
+
+    if (state.keyboardConfig || state.mouseConfig) {
+      run(['clearIndexChecked', 'clearHeaderChecked', 'clearChecked', 'clearSelected', 'clearCopyed'], this)
+    }
+
+    return vm.clearActived()
+  }
+
+export const refreshData =
+  ({ state, api, vm }) =>
+  (data) => {
+    const next = () => {
+      state.tableData = []
+      return api.loadTableData(data || state.tableFullData)
+    }
+    return vm.$nextTick().then(next)
+  }
+
+export const refreshStyle =
+  ({ props, el, vm }) =>
+  () => {
+    const $el = el
+    const rowSpan = props.rowSpan
+    const spanMethod = props.spanMethod
+    // 存在合并时才刷新样式
+    if ($el && (rowSpan || spanMethod)) {
+      let transform = $el.style.transform
+      let restore = () =>
+        setTimeout(() => {
+          $el.style.transform = transform
+        })
+      $el.style.transform = 'scale(0.99999)'
+      return vm.$nextTick().then(restore)
+    }
+    return vm.$nextTick()
+  }
diff --git a/packages/renderless/src/grid/table/vue.ts b/packages/renderless/src/grid/table/vue.ts
new file mode 100644
index 0000000000..6283e6d3d1
--- /dev/null
+++ b/packages/renderless/src/grid/table/vue.ts
@@ -0,0 +1,137 @@
+import type { ISharedRenderlessParamHooks } from '@/types'
+import GlobalConfig from '../../../../vue/src/grid/src/config'
+import { extend } from '../../../common/object'
+
+export const api = ['state', 'scrollEvent']
+
+const initState = ({ reactive, computed, props }) => {
+  return reactive({
+    // 存储异步加载过的行\列数据
+    asyncRenderMap: {},
+    // 存放列相关的信息
+    columnStore: {
+      // 自适应的列表集合
+      autoList: [],
+      centerList: [],
+      // 左侧冻结列表集合
+      leftList: [],
+      // 右侧冻结列表集合
+      rightList: [],
+      // 固定像素宽度列表集合
+      pxList: [],
+      // 设置了最小宽度列表集合
+      pxMinList: [],
+      // 可调整列宽列表集合
+      resizeList: [],
+      // 百分比宽度列表集合
+      scaleList: [],
+      // 百分比最小宽度列表集合
+      scaleMinList: []
+    },
+    // 存放快捷菜单的信息
+    ctxMenuStore: {
+      list: [],
+      selectChild: null,
+      selected: null,
+      showChild: false,
+      style: null,
+      visible: false
+    },
+    // 当前行
+    currentRow: null,
+    // 存放可编辑相关信息
+    editStore: {
+      editorAutoRefreshKey: 0,
+      // 激活
+      actived: { column: null, row: null },
+      // 所有选中
+      checked: { columns: [], rows: [], tColumns: [], tRows: [] },
+      // 已复制源
+      copyed: { columns: [], cut: false, rows: [] },
+      indexs: { columns: [] },
+      insertList: [],
+      removeList: [],
+      // 选中源
+      selected: { column: null, row: null },
+      titles: { columns: [] }
+    },
+    // 已展开的行
+    expandeds: [],
+    // 当前选中的筛选列
+    filterStore: {
+      column: null,
+      condition: { input: '', relation: 'equals' },
+      id: '',
+      multi: false,
+      options: [],
+      visible: false
+    },
+    // 表尾合计数据
+    footerData: [],
+    // 所有列已禁用
+    headerCheckDisabled: false,
+    // 是否全选
+    isAllSelected: false,
+    // 多选属性，有选中且非全选状态
+    isIndeterminate: false,
+    // 是否存在横向滚动条
+    overflowX: false,
+    // 是否存在纵向滚动条
+    overflowY: true,
+    // 存储滚动加载，上次滚动的位置
+    scrollLoadStore: { bodyHeight: 0, scrollHeight: 0 },
+    // 是否启用了横向 X 可视渲染方式加载
+    scrollXLoad: false,
+    // 是否启用了纵向 Y 可视渲染方式加载
+    scrollYLoad: false,
+    // 横向滚动条的高度
+    scrollbarHeight: 0,
+    // 纵向滚动条的宽度
+    scrollbarWidth: 0,
+    // 单选属性，选中行
+    selectRow: null,
+    // 存放多选工具栏相关信息
+    selectToolbarStore: {
+      layout: { height: 0, left: 0, top: 0, width: 0, zIndex: 1 },
+      visible: false
+    },
+    // 多选属性，已选中的列
+    selection: [],
+    // 渲染中的数据
+    tableData: [],
+    // tooltip提示内容
+    tooltipContent: '',
+    // tooltip提示内容是否处理换行字符
+    tooltipContentPre: false,
+    // 已展开树节点
+    treeExpandeds: [],
+    // 树节点不确定状态的列表
+    treeIndeterminates: [],
+    // 存放数据校验相关信息
+    validStore: {
+      column: null,
+      content: '',
+      isArrow: false,
+      row: null,
+      rule: null,
+      visible: false
+    },
+    // 校验tip提示内容
+    validTipContent: '',
+    // 在编辑模式下 单元格在失去焦点验证的状态
+    validatedMap: {},
+    // 表尾边框线是否显示和位置
+    showFooterBorder: false,
+    footerBorderBottom: 0,
+    tableBodyHeight: 0,
+    // 表格父容器的高度
+    parentHeight: 0,
+    ctxMenuOpts: computed(() => extend(true, {}, GlobalConfig.menu, props.contextMenu)),
+    hasTip: computed(() => TINYGrid._tooltip)
+  })
+}
+
+export const renderless = (props, context: ISharedRenderlessParamHooks, { vm }): any => {
+  const api = {} as any
+  return api
+}
diff --git a/packages/vue/src/grid/src/body/src/pc.vue b/packages/vue/src/grid/src/body/src/pc.vue
index c69301a312..e6e6d49635 100644
--- a/packages/vue/src/grid/src/body/src/pc.vue
+++ b/packages/vue/src/grid/src/body/src/pc.vue
@@ -18,7 +18,8 @@ import { getTreeChildrenKey, getTreeShowKey, handleRowGroupFold, isVirtualRow }
 
 // 滚动、拖动过程中不需要触发鼠标移入移出事件
 const isOperateMouse = ($table) =>
-  $table._isResize || ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.optimizeOpts.delayHover)
+  $table._isResize ||
+  ($table.lastScrollTime && Date.now() < $table.lastScrollTime + $table.state.optimizeOpts.delayHover)
 
 // 解决静态扫描驼峰变量问题
 const classMap = {
@@ -146,7 +147,7 @@ function buildColumnChildren(args) {
       },
       // 调用column组件的renderCell渲染单元格内部的内容
       // 如果不是表格形态，就只保留表格结构（到tiny-grid-cell），不渲染具体的内容
-      $table.isShapeTable ? column.renderCell(h, params) : null
+      $table.state.isShapeTable ? column.renderCell(h, params) : null
     ),
     validNode
   ]
@@ -198,7 +199,7 @@ function addListenerMouseleave({ $table, evntParams, showTip, showTooltip, table
       }
 
       if (showTip || showTooltip) {
-        $table.clostTooltip()
+        $table.closeTooltip()
       }
 
       evntParams.cell = event.currentTarget
@@ -367,8 +368,8 @@ function renderColumn(args1) {
   let { $seq, $table, column, columnIndex } = args1
   let { h, row } = args1
   let { align: allAlign, cellClassName, columnKey, editConfig } = $table
-  let { editRules, editStore, rowId, rowSpan, height } = $table
-  let { tableData, validOpts, validStore, validatedMap, spanMethod, columnStore, dropConfig = {} } = $table
+  let { editRules, rowId, rowSpan, height, spanMethod, dropConfig = {} } = $table
+  let { tableData, validOpts, validStore, validatedMap, columnStore, editStore } = $table.state
   let { isDirty, attrs = { 'data-colid': column.id } } = {}
   let { isMessageDefault, isMessageInline } = validOpts
   let { actived } = editStore
@@ -530,7 +531,8 @@ function renderRow(args) {
   let { $rowIndex, $seq, $table, _vm, editStore } = args
   let { h, row, rowActived } = args
   let { rowClassName, rowIndex, rowKey, rowLevel, rowid, rows } = args
-  let { selection, seq, tableColumn, trOn, treeConfig, isNotRenderRow } = args
+  let { seq, tableColumn, trOn, treeConfig, isNotRenderRow } = args
+  const { selection } = $table.state
 
   if (isNotRenderRow) {
     return
@@ -663,9 +665,11 @@ function renderRowTree(args, renderRows) {
 }
 
 function renderRows({ h, _vm, $table, $seq, rowLevel, tableData, tableColumn, seqCount }) {
-  let { rowKey, rowClassName, treeConfig, treeExpandeds } = $table
-  let { groupData, scrollYLoad, scrollYStore, editConfig, editStore, expandConfig = {} } = $table
-  let { expandeds, selection, rowGroup, hasVirtualRow, afterFullData, visibleColumn } = $table
+  const { state } = $table
+  const hasVirtualRow = $table.hasVirtualRow
+  const { treeExpandeds, scrollYLoad, scrollYStore, editStore, expandeds, selection, afterFullData } = state
+  let { rowKey, rowClassName, treeConfig, rowGroup } = $table
+  let { editConfig, expandConfig = {} } = $table
   let rows = []
   let expandMethod = expandConfig.activeMethod
   let startIndex = scrollYStore.startIndex
@@ -814,8 +818,8 @@ export default defineComponent({
   },
   render() {
     let { $parent: $table } = this as any
-    let { $grid, isCenterEmpty, keyboardConfig = {}, mouseConfig = {}, renderEmpty } = $table
-    let { scrollLoad, tableColumn, tableData, tableLayout } = $table
+    let { $grid, isCenterEmpty, keyboardConfig = {}, mouseConfig = {}, renderEmpty, scrollLoad } = $table
+    let { tableColumn, tableData, tableLayout } = $table.state
     let $slots = $grid.slots
     let isCenterCls = isCenterEmpty ? 'is__center' : ''
 
diff --git a/packages/vue/src/grid/src/table/src/pc.vue b/packages/vue/src/grid/src/table/src/pc.vue
new file mode 100644
index 0000000000..2d85312856
--- /dev/null
+++ b/packages/vue/src/grid/src/table/src/pc.vue
@@ -0,0 +1,1003 @@
+<script lang="ts">
+import { h, hooks, $prefix, resolveTheme, defineComponent, useInstanceSlots, useRelation } from '@opentiny/vue-common'
+import Tooltip from '@opentiny/vue-tooltip'
+import { extend } from '@opentiny/vue-renderless/common/object'
+import { isEmptyObject, isObject, isNull } from '@opentiny/vue-renderless/common/type'
+import { uniqueId, template, toNumber, isBoolean } from '@opentiny/vue-renderless/grid/static/'
+import { getRowkey, GlobalEvent, hasChildrenList, getListeners, isScale } from '@opentiny/vue-renderless/grid/utils'
+import TINYGrid from '../../adapter'
+import GridHeader from '../../header'
+import GridFooter from '../../footer'
+import GridBody from '../../body'
+import GridFilter from '../../filter'
+import GridMenu from '../../menu'
+import GridLoading from '../../loading'
+import methods from './methods'
+import GlobalConfig from '../../config'
+import { error } from '../../tools'
+import { clearOnTableUnmount } from './strategy'
+import MfTable from '../../mobile-first/index.vue'
+import { useDrag, useRowGroup } from '../../composable'
+
+const { themes, viewConfig, columnLevelKey, defaultColumnName } = GlobalConfig
+const { TINY: T_TINY, SAAS: T_SAAS } = themes
+const { DEFAULT: V_DEFAULT, MF: V_MF, CARD: V_CARD, LIST: V_LIST } = viewConfig
+const { MF_SHOW_LIST: V_MF_LIST } = viewConfig
+
+const hiddenContainerClass = 'tiny-grid-hidden-column'
+
+// 校验插件是否被注册
+function verifyConfig(_vm) {
+  if (!getRowkey(_vm)) {
+    error('ui.grid.error.rowIdEmpty')
+  }
+
+  if (!TINYGrid._edit && _vm.editConfig) {
+    throw new Error(template(error('ui.grid.error.reqModule'), { name: 'Edit' }))
+  }
+
+  if (!TINYGrid._valid && _vm.editRules) {
+    throw new Error(template(error('ui.grid.error.reqModule'), { name: 'Validator' }))
+  }
+
+  if (!TINYGrid._keyboard && (_vm.keyboardConfig || _vm.mouseConfig)) {
+    throw new Error(template(error('ui.grid.error.reqModule'), { name: 'Keyboard' }))
+  }
+
+  if (!TINYGrid._resize && _vm.autoResize) {
+    throw new Error(template(error('ui.grid.error.reqModule'), { name: 'Resize' }))
+  }
+}
+
+function mergeScrollDirStore(scrollDir, scrollDirStore) {
+  if (scrollDir) {
+    Object.assign(scrollDirStore, {
+      startIndex: 0,
+      visibleIndex: 0,
+      adaptive: isBoolean(scrollDir.adaptive) ? scrollDir.adaptive : true,
+      renderSize: toNumber(scrollDir.rSize),
+      offsetSize: toNumber(scrollDir.oSize)
+    })
+  }
+}
+
+function loadStatic(data, _vm) {
+  // 此段代码与 watch(data) 功能重复，只在配置了 data 属性后生效
+  if (data && data.length > 0) {
+    _vm.loadTableData(data, true).then(() => {
+      _vm.handleDefault()
+      // 需要等到表格的vnode渲染完成后再去计算样式，计算每一列的宽度和滚动条位置，这里也是可以优化的点，这样会导致页面重排，重绘
+      _vm.updateStyle()
+    })
+  }
+}
+
+function mergeTreeConfig(_vm) {
+  if (_vm.treeConfig) {
+    const { ordered } = _vm.treeConfig
+
+    if (isNull(ordered)) {
+      _vm.treeConfig.ordered = true
+    }
+  }
+}
+
+const renderEmptyPartFn = (opt) => {
+  const { _vm, tableData, $slots, renderEmpty } = opt
+  return () => {
+    let emptyPartVnode = null
+    let { computerTableBodyHeight } = _vm
+
+    if (_vm.isCenterEmpty && !tableData.length) {
+      let emptyVnodes
+      let noEmptyClass = _vm.viewType === V_CARD || _vm.viewType === V_LIST
+
+      if ($slots.empty) {
+        emptyVnodes = $slots.empty.call(_vm, h)
+      } else if (renderEmpty) {
+        emptyVnodes = [renderEmpty(h, _vm)]
+      } else {
+        emptyVnodes = [
+          h('p', { class: 'tiny-grid__empty-img' }),
+          h('span', { class: 'tiny-grid__empty-text' }, GlobalConfig.i18n('ui.grid.emptyText'))
+        ]
+      }
+
+      emptyPartVnode = h(
+        'div',
+        {
+          class: [{ 'empty-center-block': !noEmptyClass }, _vm.viewCls('emptyData')],
+          style: {
+            height: computerTableBodyHeight
+          }
+        },
+        emptyVnodes
+      )
+    }
+
+    return emptyPartVnode
+  }
+}
+
+const renderFooterFn = (opt) => {
+  const { _vm, showFooter, footerData, footerMethod, tableColumn, visibleColumn, vSize } = opt
+  return () => {
+    let tableFooterVnode = [null]
+
+    if (showFooter) {
+      tableFooterVnode = h(GridFooter, {
+        props: { footerData, footerMethod, tableColumn, visibleColumn, size: vSize },
+        ref: 'tableFooter',
+        class: _vm.viewCls('tableFooter')
+      })
+    }
+
+    return tableFooterVnode
+  }
+}
+
+const renderResizeBarFn = (opt) => {
+  const { _vm, isResizable, overflowX, scrollbarHeight } = opt
+  return () => {
+    let resizeBarVnode = [null]
+
+    if (isResizable) {
+      resizeBarVnode = h('div', {
+        class: ['tiny-grid__resizable-bar', _vm.viewCls('resizeBar')],
+        style: overflowX ? { 'padding-bottom': `${scrollbarHeight}px` } : null,
+        ref: 'resizeBar',
+        key: 'tinyGridResizeBar'
+      })
+    }
+
+    return resizeBarVnode
+  }
+}
+
+const renderPluginWrapperFn = (opt) => {
+  const { hasFilter, optimizeOpts, filterStore, isCtxMenu, ctxMenuStore, hasTip, tooltipContentOpts } = opt
+  const { editRules, validOpts, height, tableData, vaildTipOpts, id, _vm } = opt
+
+  return () => {
+    // 筛选面板
+    let filterVnode = [null]
+    // 右键快捷面板
+    let ctxMenuVnode = [null]
+    // tips提示
+    let tooltipVnode = [null]
+    // 校验错误提示
+    let errorTooltipVnode = [null]
+    let { isMessageDefault, isMessageTooltip } = validOpts
+
+    if (hasFilter) {
+      filterVnode = h(GridFilter, {
+        props: { optimizeOpts, filterStore },
+        ref: 'filterWrapper'
+      })
+    }
+
+    if (isCtxMenu) {
+      ctxMenuVnode = h(GridMenu, { props: { ctxMenuStore }, ref: 'ctxWrapper' })
+    }
+    if (hasTip) {
+      tooltipVnode = h(Tooltip, { ref: 'tooltip', props: tooltipContentOpts })
+    }
+
+    if (hasTip && editRules && (isMessageDefault ? !height : isMessageTooltip)) {
+      errorTooltipVnode = h(Tooltip, {
+        class: 'tiny-grid__valid-error',
+        props: isMessageTooltip || tableData.length === 1 ? vaildTipOpts : null,
+        ref: 'validTip'
+      })
+    }
+
+    return h(
+      'div',
+      {
+        class: `tiny-grid${id}-wrapper ${_vm.$attrs.staticClass || ''}`,
+        ref: 'tableWrapper'
+      },
+      [
+        // 筛选
+        filterVnode,
+        // 快捷菜单
+        ctxMenuVnode,
+        // Ellipsis tooltip
+        tooltipVnode,
+        // valid error tooltip
+        errorTooltipVnode
+      ]
+    )
+  }
+}
+
+const renderSelectToolbarFn = (opt) => {
+  const { selectToolbar, selectToolbarStore, renderedToolbar } = opt
+  return () => {
+    let selectToolbarVnode = [null]
+
+    if (selectToolbar) {
+      selectToolbarVnode = h(
+        'div',
+        {
+          ref: 'selectToolbar',
+          class: 'tiny-grid__select-toolbar',
+          style: [
+            selectToolbarStore.layout,
+            {
+              visibility: selectToolbarStore.visible ? 'visible' : 'hidden'
+            }
+          ]
+        },
+        renderedToolbar || [null]
+      )
+    }
+
+    return selectToolbarVnode
+  }
+}
+
+function getRenderer(opt) {
+  const {
+    $slots,
+    _vm,
+    optimizeOpts,
+    overflowX,
+    props,
+    showFooter,
+    showHeader,
+    tableColumn,
+    tableData,
+    vSize,
+    visibleColumn
+  } = opt
+  const { $grid, ctxMenuStore, editRules, filterStore, footerData, footerMethod, hasFilter, hasTip, height, id } = _vm
+  const {
+    isCtxMenu,
+    isResizable,
+    renderEmpty,
+    scrollbarHeight,
+    selectToolbarStore,
+    tooltipContentOpts,
+    vaildTipOpts,
+    validOpts
+  } = _vm
+  const { selectToolbar, renderedToolbar } = $grid
+
+  const renderHeader = () =>
+    showHeader ? h(GridHeader, { ref: 'tableHeader', props, class: _vm.viewCls('tableHeader') }) : [null]
+  const renderEmptyPart = renderEmptyPartFn({ _vm, tableData, $slots, renderEmpty })
+  const renderFooter = renderFooterFn({ _vm, showFooter, footerData, footerMethod, tableColumn, visibleColumn, vSize })
+  const renderResizeBar = renderResizeBarFn({ _vm, isResizable, overflowX, scrollbarHeight })
+  const arg1 = { hasFilter, optimizeOpts, filterStore, isCtxMenu, ctxMenuStore, hasTip, tooltipContentOpts }
+  const arg2 = { editRules, validOpts, height, tableData, vaildTipOpts, id, _vm }
+  const renderPluginWrapper = renderPluginWrapperFn(Object.assign(arg1, arg2))
+
+  const renderSelectToolbar = renderSelectToolbarFn({ selectToolbar, selectToolbarStore, renderedToolbar })
+
+  return {
+    renderHeader,
+    renderEmptyPart,
+    renderFooter,
+    renderResizeBar,
+    renderPluginWrapper,
+    renderSelectToolbar
+  }
+}
+
+const renderFooterBorder = (_vm) => {
+  const { showFooterBorder, footerBorderBottom } = _vm
+  const cls = ['tiny-grid__footer-border-line', _vm.viewCls('footerBorder')]
+  const style = `bottom:${footerBorderBottom}px;`
+
+  return showFooterBorder ? h('div', { ref: 'footerBorder', class: cls, style }) : null
+}
+
+// 设置表格最外层元素类名
+function getTableAttrs(tableVm) {
+  const { vSize, editConfig, showHeader, showFooter, overflowY, overflowX, showOverflow } = tableVm
+  const { showHeaderOverflow, highlightCell, optimizeOpts, stripe, border, isGroup, mouseConfig = {} } = tableVm
+  const { maxHeight, loading, highlightHoverRow, highlightHoverColumn, validOpts } = tableVm
+  const { stripeSaas, borderSaas, borderVertical, isThemeSaas, rowSpan, dropConfig = {} } = tableVm
+
+  const map = {
+    showHeader: 'show__head',
+    showFooter: 'show__foot',
+    overflowY: 'scroll__y',
+    overflowX: 'scroll__x',
+    loading: 'is__loading',
+    highlightHoverRow: 'row__highlight',
+    highlightHoverColumn: 'column__highlight'
+  }
+
+  const style = {}
+
+  if (maxHeight) {
+    style.maxHeight = isScale(maxHeight) ? maxHeight : toNumber(maxHeight) + 'px'
+  }
+
+  return {
+    class: {
+      'tiny-grid h-full sm:h-auto !bg-transparent sm:!bg-color-bg-1 after:border-none sm:after:border-solid': true,
+      [`row__valid-${validOpts.message}`]: true,
+      [`size__${vSize}`]: vSize,
+      'tiny-grid-editable': editConfig,
+      [map.showHeader]: showHeader,
+      [map.showFooter]: showFooter,
+      [map.overflowY]: overflowY,
+      [map.overflowX]: overflowX,
+      'all-overflow': showOverflow,
+      'all-head-overflow': showHeaderOverflow,
+      'tiny-grid-cell__highlight': highlightCell,
+      'tiny-grid__animat': optimizeOpts.animat,
+      'tiny-grid__stripe': !isThemeSaas && stripe, // saas主题下，无此类名
+      'tiny-grid__stripe-saas': isThemeSaas && stripeSaas,
+      'tiny-grid__border': border || isGroup,
+      'tiny-grid__border-saas': isThemeSaas && borderSaas,
+      'tiny-grid__group-saas': isThemeSaas && isGroup,
+      'tiny-grid__border-vertical': borderVertical,
+      'tiny-grid__checked': mouseConfig.checked,
+      'mark-insert': editConfig && editConfig.markInsert,
+      'edit__no-border': editConfig && editConfig.showBorder === false,
+      [map.loading]: loading,
+      [map.highlightHoverRow]: highlightHoverRow,
+      [map.highlightHoverColumn]: highlightHoverColumn,
+      'is__row-span': rowSpan && rowSpan.length > 0,
+      'row__drop-handle--index': dropConfig.rowHandle === 'index'
+    },
+    style
+  }
+}
+const getTableData = () => {
+  const tableData = {
+    // 条件处理后数据
+    afterFullData: [],
+    // 分组表场景全量数据（包含虚拟行）
+    groupFullData: [],
+    elemStore: {},
+    // 表尾高度
+    footerHeight: 0,
+    // 缓存数据集 rowid --> { row, rowid: rowId, index }
+    fullAllDataRowIdData: {},
+    // 缓存数据集 row --> { row, rowid: rowId, index }
+    fullAllDataRowMap: new Map(),
+    // 缓存数据集 columnId --> { colid: column.id, column, index }
+    fullColumnIdData: {},
+    // 缓存数据集 column --> { colid: column.id, column, index }
+    fullColumnMap: new Map(),
+    fullDataRowIdData: {},
+    fullDataRowMap: new Map(),
+    // 缓存树形表格行数据以及其父级行数据的映射关系
+    parentRowMap: new Map(),
+    // 临时插入数据集
+    temporaryRows: [],
+    // 表头高度
+    headerHeight: 0,
+    // 最后滚动位置
+    lastScrollLeft: 0,
+    lastScrollTop: 0,
+    // 表格父容器的高度
+    parentHeight: 0,
+    scrollDirection: 'N', // N,X,Y （滚动方向）
+    // 存放横向 X 虚拟滚动相关的信息
+    scrollXStore: {},
+    // 存放纵向 Y 虚拟滚动相关信息
+    scrollYStore: {},
+    // 完整数据
+    tableFullData: [],
+    // 表格高度
+    tableHeight: 0,
+    // 表格宽度
+    tableWidth: 0,
+    // 存放 tooltip 相关信息
+    tooltipStore: {},
+    // 表格已挂载完成
+    afterMounted: false,
+    // 临时任务
+    tasks: {},
+    // 列初始就绪
+    isColumnInitReady: false,
+    // 列就绪
+    isColumnReady: false,
+    // 分组表场景是否具有虚拟行
+    hasVirtualRow: false,
+    // 是否是标签式用法场景
+    isTagUsageSence: false,
+    // 收集列信息（列数量和列顺序）
+    columnCollectKey: ''
+  }
+  return tableData
+}
+
+const bindEvent = (ctx) => {
+  GlobalEvent.on(ctx, 'mousedown', ctx.handleGlobalMousedownEvent)
+  // 因为冒泡事件部分情况下被阻止继续传播，导致处理异常，因此注册 mousedown 捕获事件
+  GlobalEvent.on(ctx, 'mousedown', ctx.handleGlobalMousedownCaptureEvent, true)
+  GlobalEvent.on(ctx, 'blur', ctx.handleGlobalBlurEvent)
+  GlobalEvent.on(ctx, 'mousewheel', ctx.handleGlobalMousewheelEvent)
+  GlobalEvent.on(ctx, 'keydown', ctx.handleGlobalKeydownEvent)
+  GlobalEvent.on(ctx, 'resize', ctx.handleGlobalResizeEvent)
+  GlobalEvent.on(ctx, 'contextmenu', ctx.handleGlobalContextmenuEvent)
+}
+
+const unbindEvent = (table) => {
+  GlobalEvent.off(table, 'mousedown')
+  GlobalEvent.off(table, 'mousedown', true)
+  GlobalEvent.off(table, 'blur')
+  GlobalEvent.off(table, 'mousewheel')
+  GlobalEvent.off(table, 'keydown')
+  GlobalEvent.off(table, 'resize')
+  GlobalEvent.off(table, 'contextmenu')
+}
+
+export default defineComponent({
+  name: `${$prefix}GridTable`,
+  props: {
+    // 所有的列对齐方式
+    align: { type: String, default: () => GlobalConfig.align },
+    // 是否自动监听父容器变化去更新响应式表格宽高
+    autoResize: Boolean,
+    // 是否带有纵向边框
+    border: { type: Boolean, default: () => GlobalConfig.border },
+    // 给单元格附加 className
+    cellClassName: [String, Function],
+    // 主键配置
+    columnKey: Boolean,
+    // 所有列最小宽度，把剩余宽度按比例分配
+    columnMinWidth: [Number, String],
+    // 所有列宽度
+    columnWidth: [Number, String],
+    // 快捷菜单配置项
+    contextMenu: Object,
+    // 初始化绑定动态列
+    customs: Array,
+    // 数据
+    data: [Array, Object],
+    // 行拖拽和列拖拽的配置
+    dropConfig: Object,
+    // 编辑配置项
+    editConfig: [Object, Boolean],
+    // 校验规则配置项
+    editRules: Object,
+    // 展开行配置项
+    expandConfig: Object,
+    // 列的宽度是否自撑开
+    fit: { type: Boolean, default: () => GlobalConfig.fit },
+    // 所有的表尾列的对齐方式
+    footerAlign: { type: String, default: () => GlobalConfig.footerAlign },
+    // 给表尾的单元格附加 className
+    footerCellClassName: [String, Function],
+    // 表尾合计的计算方法
+    footerMethod: Function,
+    // 给表尾的行附加 className
+    footerRowClassName: [String, Function],
+    // 表尾合并行或列
+    footerSpanMethod: Function,
+    // 所有的表头列的对齐方式
+    headerAlign: { type: String, default: () => GlobalConfig.headerAlign },
+    // 给表头的单元格附加 className
+    headerCellClassName: [String, Function],
+    // 给表头的行附加 className
+    headerRowClassName: [String, Function],
+    // 表头后置图标是否绝对定位
+    headerSuffixIconAbsolute: Boolean,
+    // 表格的高度
+    height: [Number, String],
+    // 激活单元格编辑时是否高亮显示
+    highlightCell: Boolean,
+    // 是否要高亮当前选中列
+    highlightCurrentColumn: {
+      type: Boolean,
+      default: () => GlobalConfig.highlightCurrentColumn
+    },
+    // 是否要高亮当前选中行
+    highlightCurrentRow: {
+      type: Boolean,
+      default: () => GlobalConfig.highlightCurrentRow
+    },
+    // 鼠标移到列是否要高亮显示
+    highlightHoverColumn: {
+      type: Boolean,
+      default: () => GlobalConfig.highlightHoverColumn
+    },
+    // 鼠标移到行是否要高亮显示
+    highlightHoverRow: {
+      type: Boolean,
+      default: () => GlobalConfig.highlightHoverRow
+    },
+    // 是否开启异步列功能
+    isAsyncColumn: Boolean,
+    isCenterEmpty: Boolean,
+    // 是否拖拽表头调整列顺序
+    isDragHeaderSorting: Boolean,
+    // 按键配置项
+    keyboardConfig: Object,
+    // 表格是否加载中
+    loading: Boolean,
+    loadingComponent: Object,
+    // 表格的最大高度
+    maxHeight: [Number, String],
+    // 表格的最小高度
+    minHeight: [Number, String],
+    // 鼠标配置项
+    mouseConfig: Object,
+    // 优化配置项
+    optimization: Object,
+    // 额外的参数
+    params: Object,
+    // 单选配置
+    radioConfig: Object,
+    // 是否所有服务端筛选
+    remoteFilter: Boolean,
+    // 是否所有服务端排序
+    remoteSort: Boolean,
+    // 空数据渲染
+    renderEmpty: Function,
+    // 自定义表格行渲染后的逻辑
+    renderRowAfter: Function,
+    // 所有列是否允许拖动列宽调整大小
+    resizable: { type: Boolean, default: () => GlobalConfig.resizable },
+    // 给行附加 className
+    rowClassName: [String, Function],
+    // 行分组配置映射表
+    rowGroup: Object,
+    rowId: { type: String, default: () => GlobalConfig.rowId },
+    rowKey: Boolean,
+    // 行合并
+    rowSpan: Array,
+    // 滚动加载(滚动分页加载)
+    scrollLoad: Object,
+    // 多选配置项
+    selectConfig: Object,
+    // 是否显示表尾合计
+    showFooter: Boolean,
+    // 是否显示表头
+    showHeader: { type: Boolean, default: () => GlobalConfig.showHeader },
+    // 设置表头所有内容过长时显示为省略号
+    showHeaderOverflow: {
+      type: [Boolean, String],
+      default: () => GlobalConfig.showHeaderOverflow
+    },
+    // 设置所有内容过长时显示为省略号
+    showOverflow: {
+      type: [Boolean, String],
+      default: () => GlobalConfig.showOverflow
+    },
+    // 表格的尺寸
+    size: { type: String, default: () => GlobalConfig.size },
+    // 排序配置项
+    sortConfig: Object,
+    // 自定义所有列的排序方法
+    sortMethod: Function,
+    // 全局开关控制所有的列是否可以排列
+    sortable: { type: Boolean, default: true },
+    // 合并行或列
+    spanMethod: Function,
+    // 只对 type=index 时有效，自定义序号的起始值
+    startIndex: { type: Number, default: 0 },
+    // 是否带有斑马纹
+    stripe: { type: Boolean, default: () => GlobalConfig.stripe },
+    // saas下是否带有斑马纹
+    stripeSaas: { type: Boolean, default: () => GlobalConfig.stripeSaas },
+    // saas下是否带有下边框线
+    borderSaas: { type: Boolean, default: () => GlobalConfig.borderSaas },
+    // saas下配置竖线
+    borderVertical: { type: Boolean, default: () => GlobalConfig.borderVertical },
+    // 默认统计配置
+    summaryConfig: Object,
+    // 是否自动根据状态属性去更新响应式表格宽高
+    syncResize: Boolean,
+    tableLayout: String,
+    // tooltip 配置项
+    tooltipConfig: { type: Object, default: () => ({}) },
+    // 树形结构配置项
+    treeConfig: Object,
+    // 校验配置项
+    validConfig: Object,
+    // 多端卡片配置
+    cardConfig: Object,
+    // 视图类型
+    viewType: { type: String, default: () => V_DEFAULT },
+    // 移动优先视图下展示类型
+    mfShow: { type: String, default: () => V_MF_LIST },
+    // 列锚点
+    columnAnchor: Array,
+    // 表尾自定义渲染
+    renderFooter: Function,
+    // 多端列表配置
+    listConfig: Object,
+    // 多端甘特配置
+    ganttConfig: Object,
+    // 数据预取配置
+    prefetch: [Boolean, Array],
+    // 相交配置
+    intersectionOption: Object,
+    // 值比较方法
+    equals: Function,
+    // 操作列（type为index或radio或selection的列）是否可拖动列宽
+    operationColumnResizable: { type: Boolean, default: () => GlobalConfig.operationColumnResizable },
+    // 自动清空鼠标选中
+    autoClearMouseChecked: { type: Boolean, default: true },
+    // 自动清空键盘复制
+    autoClearKeyboardCopy: { type: Boolean, default: false },
+    // 自定义列组件名称（列表）
+    customColumnNames: { type: [String, Array], default: GlobalConfig.defaultColumnName }
+  },
+  provide() {
+    return {
+      $table: this,
+      // 嵌套表格屏蔽父表格列
+      $column: null
+    }
+  },
+  inject: {
+    $grid: {
+      default: null
+    }
+  },
+  computed: {
+    bodyCtxMenu() {
+      return this.ctxMenuOpts.body && this.ctxMenuOpts.body.options ? this.ctxMenuOpts.body.options : []
+    },
+    ctxMenuList() {
+      let rest = []
+      this.ctxMenuStore.list.forEach((list) => list.forEach((item) => rest.push(item)))
+      return rest
+    },
+    ctxMenuOpts() {
+      return extend(true, {}, GlobalConfig.menu, this.contextMenu)
+    },
+    hasFilter() {
+      return this.tableColumn.some((column) => isObject(column.filter) && !isEmptyObject(column.filter))
+    },
+    hasTip() {
+      return TINYGrid._tooltip
+    },
+    headerCtxMenu() {
+      return this.ctxMenuOpts.header && this.ctxMenuOpts.header.options ? this.ctxMenuOpts.header.options : []
+    },
+    isCtxMenu() {
+      return this.headerCtxMenu.length || this.bodyCtxMenu.length
+    },
+    // 是否使用了分组表头
+    isGroup() {
+      return this.collectColumn.some((column) => hasChildrenList(column))
+    },
+    isResizable() {
+      return this.resizable || this.tableFullColumn.some((column) => column.resizable)
+    },
+    optimizeOpts() {
+      return extend(true, {}, GlobalConfig.optimization, this.optimization)
+    },
+    sortOpts() {
+      return extend(true, {}, GlobalConfig.sortConfig, this.sortConfig)
+    },
+    tooltipContentOpts() {
+      return extend(
+        true,
+        {
+          content: this.tooltipContent,
+          pre: this.tooltipContentPre, //  pre 元素可定义预格式化的文本
+          placement: 'right',
+          type: this.tooltipConfig.effect ? undefined : 'normal'
+        },
+        this.tooltipConfig
+      )
+    },
+    // 表格尺寸（medium|small|mini）
+    vSize() {
+      return this.size || (this.$parent && this.$parent.size) || (this.$parent && this.$parent.vSize)
+    },
+    vaildTipOpts() {
+      return extend(
+        true,
+        {
+          isArrow: false,
+          placement: 'top',
+          type: 'error',
+          content: this.validTipContent
+        },
+        this.tooltipConfig
+      )
+    },
+    validOpts() {
+      const config = Object.assign(
+        { message: 'tooltip' },
+        GlobalConfig.validConfig,
+        this.$grid?.designConfig?.validConfig,
+        this.validConfig
+      )
+
+      config.isMessageTooltip = config.message === 'tooltip'
+      config.isMessageDefault = config.message === 'default'
+      config.isMessageInline = config.message === 'inline'
+
+      return config
+    },
+    computerTableBodyHeight() {
+      return this.tableBodyHeight === 0 ? 'calc(100% - 36px)' : `${this.tableBodyHeight}px`
+    },
+    isThemeTiny() {
+      return this.tinyTheme === T_TINY
+    },
+    isThemeSaas() {
+      return this.tinyTheme === T_SAAS
+    },
+    isViewDefault() {
+      return this.viewType === V_DEFAULT
+    },
+    isShapeTable() {
+      // 表格处于默认视图或mf视图大屏时显示为普通表格；其它视图都显示为多端形式
+      return this.isViewDefault || (this.viewType === V_MF && this.$grid.currentBreakpoint !== 'default')
+    },
+    columnNames() {
+      const { customColumnNames } = this
+      const columnNames = [defaultColumnName]
+
+      const pushIfNot = (columnName) => {
+        if (typeof columnName === 'string' && !columnNames.includes(columnName)) {
+          columnNames.push(columnName)
+        }
+      }
+
+      if (Array.isArray(customColumnNames) && customColumnNames.length > 0) {
+        customColumnNames.forEach(pushIfNot)
+      } else if (typeof customColumnNames === 'string') {
+        pushIfNot(customColumnNames)
+      }
+
+      return columnNames
+    }
+  },
+  watch: {
+    collectColumn(value) {
+      // 这里在表格初始化的时候会触发两次（标签式），造成性能损失，待整改
+      this.watchColumn(value)
+    },
+    customs(value) {
+      !this.isUpdateCustoms && this.mergeCustomColumn(value)
+      this.isUpdateCustoms = false
+    },
+    height() {
+      this.$nextTick(this.recalculate)
+    },
+    data() {
+      // data的监控处理：a、在vue2中，数组对象替换、数组长度改变和数组项属性改变；b、在vue3中，数组对象替换
+      this.handleDataChange()
+    },
+    // 此属性暂时没有找到应用的demo，从语义上来说，觉得可以删除，官网有对应api但是没有对应的示例
+    syncResize(value) {
+      // 是否自动根据状态属性去更新响应式表格宽高
+      value && this.$nextTick(this.recalculate)
+    },
+    tableColumn() {
+      // 对所有列的列宽进行分类：百分比/px
+      this.analyColumnWidth()
+      // 处理空数据时表头是否禁用
+      this.handleSelectionHeader()
+    },
+    parentHeight() {
+      this.$nextTick(this.recalculate)
+    }
+  },
+  created() {
+    let { scrollXStore, scrollYStore, optimizeOpts, data } = Object.assign(this, getTableData())
+    let { scrollX, scrollY } = optimizeOpts
+
+    // 判断表格对应的插件是否注册，没注册会报对应的警告（这块插件还没有进行解耦，待整改）
+    verifyConfig(this)
+
+    // 合并用户传递过来的虚拟滚动相关逻辑
+    mergeScrollDirStore(scrollX, scrollXStore)
+    mergeScrollDirStore(scrollY, scrollYStore)
+
+    // 初始化表格渲染数据
+    loadStatic(data, this)
+
+    // 合并树表配置项
+    mergeTreeConfig(this)
+
+    bindEvent(this)
+
+    // vue3下额外监控数组长度改变，解决push无响应等问题
+    this.watchDataForVue3()
+
+    // 设置表格实例
+    this.$grid.connect({ name: 'table', vm: this })
+  },
+  mounted() {
+    // 复杂场景下，当表格刚开始挂载就被用户使用v-if销毁，会导致$refs全部被清空
+    if (this.$refs.tableWrapper) {
+      // 在body上挂载弹出框类的表格内部组件：右键菜单、筛选框、提示
+      document.body.appendChild(this.$refs.tableWrapper)
+    }
+
+    this.$nextTick().then(() => {
+      this.afterMounted = true
+
+      if (this.autoResize && TINYGrid._resize) {
+        // 使用ResizeObserver监听表格父元素尺寸，然后动态计算表格各种尺寸
+        this.bindResize()
+      }
+    })
+
+    setTimeout(() => {
+      const tableFooter = this.$refs.tableFooter
+      this.showFooterBorder = !!tableFooter
+      this.footerBorderBottom = tableFooter ? tableFooter.$el.getBoundingClientRect().height : 0
+    })
+  },
+  activated() {
+    let { lastScrollLeft, lastScrollTop, scrollXLoad, scrollYLoad } = this
+
+    if (lastScrollLeft || lastScrollTop) {
+      this.scrollTo(lastScrollLeft, lastScrollTop)
+      scrollXLoad && this.triggerScrollXEvent()
+      scrollYLoad && this.triggerScrollYEvent({ target: { scrollTop: lastScrollTop } })
+    }
+
+    bindEvent(this)
+  },
+  setup(props, context) {
+    const { slots, attrs, listeners } = context
+    const id = hooks.ref(uniqueId())
+    // 列分组配置
+    const collectColumn = hooks.ref([])
+    // 完整所有列
+    const tableFullColumn = hooks.ref([])
+    // 显示的列
+    const visibleColumn = hooks.ref([])
+    // 渲染的列
+    const tableColumn = hooks.ref([])
+
+    // TINY主题变量
+    const tinyTheme = hooks.ref(resolveTheme(props, context))
+    const $table = hooks.getCurrentInstance().proxy
+
+    useInstanceSlots()
+
+    useRelation({
+      relationKey: `${columnLevelKey}-${id.value}`,
+      childrenKey: 'childColumns',
+      relationContainer: () => $table.$el.querySelector(`.${hiddenContainerClass}`),
+      onChange: () => {
+        const collectKey = $table.computeCollectKey()
+
+        if (collectKey !== $table.columnCollectKey) {
+          $table.columnCollectKey = collectKey
+          $table.assembleColumns()
+        }
+      }
+    })
+
+    useDrag({ dropConfig: hooks.toRef(props, 'dropConfig'), collectColumn, tableColumn })
+
+    useRowGroup({ rowGroup: hooks.toRef(props, 'rowGroup'), visibleColumn, tableFullColumn, tableColumn })
+
+    hooks.onBeforeUnmount(() => {
+      const { elemStore, $refs } = $table
+      const containerList = ['main', 'left', 'right']
+      const tableWrapper = $refs.tableWrapper
+
+      if (tableWrapper && tableWrapper.parentNode) {
+        tableWrapper.parentNode.removeChild(tableWrapper)
+      }
+
+      if (TINYGrid._resize) {
+        $table.unbindResize()
+      }
+
+      $table.closeFilter()
+      $table.closeMenu()
+
+      containerList.forEach((layout) => {
+        const ySpaceElem = elemStore[`${layout}-body-ySpace`]
+
+        if (ySpaceElem) {
+          ySpaceElem.onscroll = null
+        }
+      })
+
+      unbindEvent($table)
+      clearOnTableUnmount($table)
+    })
+
+    hooks.onDeactivated(() => {
+      unbindEvent($table)
+    })
+
+    useInstanceSlots()
+
+    const tableListeners = getListeners(attrs, listeners)
+
+    return { slots, tableListeners, tinyTheme, id, collectColumn, tableFullColumn, visibleColumn, tableColumn }
+  },
+  render() {
+    let { border, collectColumn, columnStore, editConfig, highlightCell, highlightHoverColumn, instanceSlots } =
+      this as any
+    let { highlightHoverRow, isGroup, loading, loadingComponent, mouseConfig = {}, optimizeOpts } = this as any
+    let {
+      overflowX,
+      overflowY,
+      showFooter,
+      showHeader,
+      showHeaderOverflow,
+      showOverflow,
+      dropConfig = {},
+      isThemeSaas
+    } = this as any
+    let {
+      stripe,
+      tableColumn,
+      tableData,
+      validOpts,
+      vSize,
+      visibleColumn,
+      slots,
+      stripeSaas,
+      borderSaas,
+      isShapeTable,
+      rowSpan
+    } = this as any
+    let { borderVertical, cardConfig, listConfig, ganttConfig } = this
+    let { leftList, rightList } = columnStore
+    const props = { tableData, tableColumn, visibleColumn, collectColumn, size: vSize, isGroup }
+
+    Object.assign(props, { cardConfig, listConfig, ganttConfig })
+    let args = { $slots: slots, _vm: this, leftList, optimizeOpts, overflowX, props, rightList }
+
+    Object.assign(args, { showFooter, showHeader, tableColumn, tableData, vSize, visibleColumn })
+    const renders = getRenderer(args)
+    const { renderHeader, renderEmptyPart, renderFooter } = renders
+    const { renderResizeBar, renderPluginWrapper, renderSelectToolbar } = renders
+
+    return h('div', getTableAttrs(this), [
+      // 隐藏列
+      h(
+        'div',
+        { class: 'tiny-grid-hidden-column', ref: 'hideColumn' },
+        instanceSlots.default && instanceSlots.default()
+      ),
+      // 主头部
+      renderHeader(),
+      // 居中显示空数据
+      renderEmptyPart(),
+      // 主内容
+      h(GridBody, { ref: 'tableBody', props, class: this.viewCls('tableBody') }),
+      // 底部汇总
+      renderFooter(),
+      // 边框线
+      h('div', { class: ['tiny-grid__border-line', this.viewCls('borderLine')], key: 'tinyGridBorderLine' }),
+      // 列拖拽参考线
+      renderResizeBar(),
+      // 加载中
+      h(GridLoading, {
+        props: { visible: loading, loadingComponent },
+        class: this.viewCls('gridLoading')
+      }),
+      // 筛选、快捷菜单、Tip提示、校验提示
+      renderPluginWrapper(),
+      // 多选工具栏
+      renderSelectToolbar(),
+      // 多端表格（默认主题或默认视图/mf大屏下，不渲染）
+      !isShapeTable ? h(MfTable, { ref: 'mfTable', props }) : null,
+      // 表尾边框线
+      renderFooterBorder(this)
+    ])
+  },
+  methods: {
+    ...methods,
+    handleDataChange() {
+      // handleDefault：处理一些默认值（默认选中、默认展开）
+      if (Array.isArray(this.data)) {
+        !this._isUpdateData &&
+          this.loadTableData(this.data, true).then(this.handleDefault).then(this.handleSelectionHeader)
+        this._isUpdateData = false
+      }
+    },
+    viewCls(module) {
+      return (this as any).$grid.viewCls(module)
+    }
+  }
+})
+</script>