From bb52592ab99eba5b32bc08b44a2fff24e4f1836d Mon Sep 17 00:00:00 2001
From: xuliangzhan <xu_liangzhan@163.com>
Date: Wed, 15 Sep 2021 22:56:15 +0800
Subject: [PATCH] releases 4.0.28

---
 examples/views/grid/Basic.vue              | 123 ++++++++++++++++++---
 examples/views/table/advanced/Dynamic.vue  |   2 +-
 examples/views/table/edit/RealtimeSave.vue |   2 +-
 package.json                               |   2 +-
 packages/table/src/table.ts                |   6 +-
 packages/tooltip/src/tooltip.ts            |   8 +-
 types/plugins/pro.d.ts                     |   3 +-
 types/table.d.ts                           |  19 +++-
 8 files changed, 137 insertions(+), 28 deletions(-)

diff --git a/examples/views/grid/Basic.vue b/examples/views/grid/Basic.vue
index e924a70e3..6b9c9c808 100644
--- a/examples/views/grid/Basic.vue
+++ b/examples/views/grid/Basic.vue
@@ -4,11 +4,11 @@
       <grid-api-link name="vxe-grid"/> 高级表格：一个包含表单、工具栏、基础表格、分页...等全功能的组件<br>
     </p>
 
-    <vxe-grid v-bind="gridOptions">
+    <vxe-grid v-bind="gridOptions1">
       <template #toolbar_buttons>
-        <vxe-button @click="gridOptions.align = 'left'">居左</vxe-button>
-        <vxe-button @click="gridOptions.align = 'center'">居中</vxe-button>
-        <vxe-button @click="gridOptions.align = 'right'">居右</vxe-button>
+        <vxe-button @click="gridOptions1.align = 'left'">居左</vxe-button>
+        <vxe-button @click="gridOptions1.align = 'center'">居中</vxe-button>
+        <vxe-button @click="gridOptions1.align = 'right'">居右</vxe-button>
       </template>
     </vxe-grid>
 
@@ -18,6 +18,17 @@
       <pre-code class="xml">{{ demoCodes[0] }}</pre-code>
       <pre-code class="typescript">{{ demoCodes[1] }}</pre-code>
     </pre>
+
+    <p class="tip">异步获取列</p>
+
+    <vxe-grid v-bind="gridOptions2"></vxe-grid>
+
+    <p class="demo-code">{{ $t('app.body.button.showCode') }}</p>
+
+    <pre>
+      <pre-code class="xml">{{ demoCodes[2] }}</pre-code>
+      <pre-code class="typescript">{{ demoCodes[3] }}</pre-code>
+    </pre>
   </div>
 </template>
 
@@ -27,15 +38,15 @@ import { VxeGridProps } from '../../../types/index'
 
 export default defineComponent({
   setup () {
-    const gridOptions = reactive<VxeGridProps>({
+    const gridOptions1 = reactive<VxeGridProps>({
       border: true,
       resizable: true,
       height: 300,
       align: null,
       columns: [
         { type: 'seq', width: 50 },
-        { field: 'name', title: 'app.body.label.name' },
-        { field: 'sex', title: 'app.body.label.sex', showHeaderOverflow: true },
+        { field: 'name', title: 'name' },
+        { field: 'sex', title: 'sex', showHeaderOverflow: true },
         { field: 'address', title: 'Address', showOverflow: true }
       ],
       toolbarConfig: {
@@ -54,15 +65,48 @@ export default defineComponent({
         { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
       ]
     })
+
+    const gridOptions2 = reactive<VxeGridProps>({
+      border: true,
+      resizable: true,
+      loading: false,
+      height: 300,
+      columns: [],
+      data: []
+    })
+
+    gridOptions2.loading = true
+    setTimeout(() => {
+      gridOptions2.loading = false
+      gridOptions2.columns = [
+        { type: 'seq', width: 50 },
+        { field: 'name', title: 'Name' },
+        { field: 'sex', title: 'Sex', showHeaderOverflow: true },
+        { field: 'role', title: 'Role' },
+        { field: 'address', title: 'Address', showOverflow: true }
+      ]
+      gridOptions2.data = [
+        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
+        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+        { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
+        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
+        { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
+        { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
+        { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
+        { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
+      ]
+    }, 3000)
+
     return {
-      gridOptions,
+      gridOptions1,
+      gridOptions2,
       demoCodes: [
         `
-        <vxe-grid v-bind="gridOptions">
+        <vxe-grid v-bind="gridOptions1">
           <template #toolbar_buttons>
-            <vxe-button @click="gridOptions.align = 'left'">居左</vxe-button>
-            <vxe-button @click="gridOptions.align = 'center'">居中</vxe-button>
-            <vxe-button @click="gridOptions.align = 'right'">居右</vxe-button>
+            <vxe-button @click="gridOptions1.align = 'left'">居左</vxe-button>
+            <vxe-button @click="gridOptions1.align = 'center'">居中</vxe-button>
+            <vxe-button @click="gridOptions1.align = 'right'">居右</vxe-button>
           </template>
         </vxe-grid>
         `,
@@ -72,15 +116,15 @@ export default defineComponent({
 
         export default defineComponent({
           setup () {
-            const gridOptions = reactive<VxeGridProps>({
+            const gridOptions1 = reactive<VxeGridProps>({
               border: true,
               resizable: true,
               height: 300,
               align: null,
               columns: [
                 { type: 'seq', width: 50 },
-                { field: 'name', title: 'app.body.label.name' },
-                { field: 'sex', title: 'app.body.label.sex', showHeaderOverflow: true },
+                { field: 'name', title: 'name' },
+                { field: 'sex', title: 'sex', showHeaderOverflow: true },
                 { field: 'address', title: 'Address', showOverflow: true }
               ],
               toolbarConfig: {
@@ -99,8 +143,55 @@ export default defineComponent({
                 { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
               ]
             })
+
             return {
-              gridOptions
+              gridOptions1
+            }
+          }
+        })
+        `,
+        `
+        <vxe-grid v-bind="gridOptions2"></vxe-grid>
+        `,
+        `
+        import { defineComponent, reactive } from 'vue'
+        import { VxeGridProps } from 'vxe-table'
+
+        export default defineComponent({
+          setup () {
+            const gridOptions2 = reactive<VxeGridProps>({
+              border: true,
+              resizable: true,
+              loading: false,
+              height: 300,
+              columns: [],
+              data: []
+            })
+
+            gridOptions2.loading = true
+            setTimeout(() => {
+              gridOptions2.loading = false
+              gridOptions2.columns = [
+                { type: 'seq', width: 50 },
+                { field: 'name', title: 'Name' },
+                { field: 'sex', title: 'Sex', showHeaderOverflow: true },
+                { field: 'role', title: 'Role' },
+                { field: 'address', title: 'Address', showOverflow: true }
+              ]
+              gridOptions2.data = [
+                { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'Shenzhen' },
+                { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
+                { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
+                { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women', age: 23, address: 'Shenzhen' },
+                { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
+                { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women', age: 21, address: 'Shenzhen' },
+                { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man', age: 29, address: 'Shenzhen' },
+                { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man', age: 35, address: 'Shenzhen' }
+              ]
+            }, 3000)
+
+            return {
+              gridOptions2
             }
           }
         })
diff --git a/examples/views/table/advanced/Dynamic.vue b/examples/views/table/advanced/Dynamic.vue
index a4a8fe643..65d7202cd 100644
--- a/examples/views/table/advanced/Dynamic.vue
+++ b/examples/views/table/advanced/Dynamic.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p class="tip">
-      使用 v-for 去循环静态列是非常糟糕的，仅用于改变属性，需确保 key 唯一性<span class="green">（动态场景需使用 <grid-api-link name="vxe-grid"/> 进行渲染）</span><br>
+      使用 v-for 去循环静态列是非常糟糕的，仅用于改变属性，需确保 key 唯一性<span class="green">（动态场景需使用 <router-link :to="{name: 'GridBasic'}">vxe-grid</router-link> 进行渲染）</span><br>
       如果列信息发生变动，则需要通过调用 <table-api-link prop="refreshColumn"/> 方法刷新列信息<br>
       <span class="red">（注：该用法是不建议使用，所有兼容性应自行解决，该示例仅供参考）</span>
     </p>
diff --git a/examples/views/table/edit/RealtimeSave.vue b/examples/views/table/edit/RealtimeSave.vue
index 8f9281632..eff94298c 100644
--- a/examples/views/table/edit/RealtimeSave.vue
+++ b/examples/views/table/edit/RealtimeSave.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <p class="tip">通过监听 <table-api-link prop="edit-closed"/> 事件实现编辑完成即时保存功能，再配合 <table-api-link prop="reloadRow"/> 局部刷新函数<span class="red">（具体请自行实现，该示例仅供参考）</span></p>
+    <p class="tip">通过监听 <table-api-link prop="edit-closed"/> 事件实现编辑完成即时保存功能，再配合 <table-api-link prop="reloadRow"/> 局部加载行的函数，调用该方法之后，会将指定行的状态更新为初始状态，可用于局部刷新数据<span class="red">（具体请自行实现，该示例仅供参考）</span></p>
 
     <vxe-table
       border
diff --git a/package.json b/package.json
index cdec9db69..66234d545 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.0.28-beta.0",
+  "version": "4.0.28",
   "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
diff --git a/packages/table/src/table.ts b/packages/table/src/table.ts
index c83053095..43c72bce1 100644
--- a/packages/table/src/table.ts
+++ b/packages/table/src/table.ts
@@ -2066,10 +2066,11 @@ export default defineComponent({
           warnLog('vxe.error.scrollErrProp', ['column.type=expand'])
         }
       }
-      nextTick(() => {
+      return nextTick().then(() => {
         if ($xetoolbar) {
           $xetoolbar.syncUpdate({ collectColumn, $table: $xetable })
         }
+        return tableMethods.recalculate()
       })
     }
 
@@ -2241,8 +2242,7 @@ export default defineComponent({
        */
       loadColumn (columns) {
         const collectColumn = XEUtils.mapTree(columns, column => Cell.createColumn($xetable, column))
-        handleColumn(collectColumn)
-        return nextTick()
+        return handleColumn(collectColumn)
       },
       /**
        * 加载列配置并恢复到初始状态
diff --git a/packages/tooltip/src/tooltip.ts b/packages/tooltip/src/tooltip.ts
index 18200d544..353475a0d 100644
--- a/packages/tooltip/src/tooltip.ts
+++ b/packages/tooltip/src/tooltip.ts
@@ -252,9 +252,11 @@ export default defineComponent({
       const { trigger } = props
       const { target } = reactData
       const wrapperElem = refElem.value
-      const parentNode = wrapperElem.parentNode
-      if (parentNode) {
-        parentNode.removeChild(wrapperElem)
+      if (wrapperElem) {
+        const parentNode = wrapperElem.parentNode
+        if (parentNode) {
+          parentNode.removeChild(wrapperElem)
+        }
       }
       if (target) {
         if (trigger === 'hover') {
diff --git a/types/plugins/pro.d.ts b/types/plugins/pro.d.ts
index e9b7f1e38..6936da349 100644
--- a/types/plugins/pro.d.ts
+++ b/types/plugins/pro.d.ts
@@ -165,11 +165,12 @@ export namespace VxeTableProDefines {
     extendCols: VxeTableDefines.ColumnInfo[];
     direction: ExtendCellAreaDirection;
     $table: VxeTableConstructor & VxeTablePrivateMethods;
+    $grid: VxeGridConstructor | null | undefined;
   }
 
   interface EventParams extends VxeEvent {
     $table: VxeTableConstructor & VxeTablePrivateMethods;
-    $grid: VxeGridConstructor & VxeGridPrivateMethods;
+    $grid: VxeGridConstructor | null | undefined;
   }
 
   type FnrTab = 'find' | 'replace';
diff --git a/types/table.d.ts b/types/table.d.ts
index d4917f996..e3cb2aff0 100644
--- a/types/table.d.ts
+++ b/types/table.d.ts
@@ -26,7 +26,7 @@ export interface VxeTableConstructor extends VxeComponentBase, VxeTableMethods {
   getComputeMaps(): TablePrivateComputed;
   renderVN: RenderFunction;
 
-  xegrid?: VxeGridConstructor | null;
+  xegrid?: VxeGridConstructor | null | undefined;
 }
 
 export interface TablePrivateRef {
@@ -1042,7 +1042,7 @@ export namespace VxeTablePropTypes {
 
   export type FooterMethod = (params: {
     $table: VxeTableConstructor & VxeTablePrivateMethods;
-    $grid: VxeGridConstructor | null;
+    $grid: VxeGridConstructor | null | undefined;
     columns: VxeTableDefines.ColumnInfo[];
     data: any[];
   }) => Array<string | number | null>[];
@@ -1616,6 +1616,7 @@ export namespace VxeTablePropTypes {
       column: VxeTableDefines.ColumnInfo;
       cellValue: any;
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): string;
     /**
      * 自定义单元格复制取值之前的方法，可以通过返回 false 阻止复制行为
@@ -1624,6 +1625,7 @@ export namespace VxeTablePropTypes {
       isCut: boolean;
       targetAreas: VxeTableProDefines.CellAreaParams[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): boolean;
     /**
      * 自定义单元格复制到剪贴板之后的方法
@@ -1632,6 +1634,7 @@ export namespace VxeTablePropTypes {
       isCut: boolean;
       targetAreas: VxeTableProDefines.CellAreaParams[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): boolean;
     /**
      * 重写单元格剪贴值清除的方法，将剪贴单元格的值清除
@@ -1641,6 +1644,7 @@ export namespace VxeTablePropTypes {
       column: VxeTableDefines.ColumnInfo;
       cellValue: any;
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }) => void;
     /**
      * 自定义单元格剪贴值清除之前的方法，可以通过返回 false 阻止清除行为
@@ -1649,6 +1653,7 @@ export namespace VxeTablePropTypes {
       cutAreas: VxeTableProDefines.CellAreaParams[];
       currentAreas: VxeTableProDefines.CellAreaParams[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }) => boolean;
     /**
      * 自定义单元格剪贴值清除之后的方法
@@ -1657,6 +1662,7 @@ export namespace VxeTablePropTypes {
       cutAreas: VxeTableProDefines.CellAreaParams[];
       currentAreas: VxeTableProDefines.CellAreaParams[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }) => void;
     /**
      * 重写单元格粘贴赋值的方法，从剪贴板赋值到单元格
@@ -1667,6 +1673,7 @@ export namespace VxeTablePropTypes {
       column: VxeTableDefines.ColumnInfo;
       cellValue: any;
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): void;
     /**
      * 自定义单元格粘贴赋值之前的方法，可以通过返回 false 阻止复制行为
@@ -1676,6 +1683,7 @@ export namespace VxeTablePropTypes {
       targetAreas: VxeTableProDefines.CellAreaParams[];
       cellValues: any[][];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): boolean;
     /**
      * 自定义单元格粘贴赋值之后的方法
@@ -1688,6 +1696,7 @@ export namespace VxeTablePropTypes {
       insertRows: any[];
       insertColumns: VxeTableDefines.ColumnInfo[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): boolean;
     /**
      * 只对 isRowIncrement 有效，自定义创建自增行数据的方法
@@ -1699,6 +1708,7 @@ export namespace VxeTablePropTypes {
       pasteCells: string[][];
       insertRows: any[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): any[];
     /**
      * 只对 isColumnIncrement 有效，自定义创建自增列配置的方法
@@ -1710,6 +1720,7 @@ export namespace VxeTablePropTypes {
       pasteCells: string[][];
       insertColumns: VxeTableDefines.ColumnOptions[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): VxeTableDefines.ColumnOptions[];
   }
   export interface ClipOpts extends ClipConfig { }
@@ -1731,12 +1742,14 @@ export namespace VxeTablePropTypes {
       isAll: boolean;
       findValue: string | null;
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): boolean;
     afterFindMethod?(params: {
       isAll: boolean;
       findValue: string | null;
       result: VxeTableProDefines.FindAndReplaceResult[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }): void;
     isReplace?: boolean;
     replaceMethod?: (params: {
@@ -1749,6 +1762,7 @@ export namespace VxeTablePropTypes {
       findValue: string | null;
       replaceValue: string;
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }) => boolean;
     afterReplaceMethod?: (params: {
       isAll: boolean;
@@ -1756,6 +1770,7 @@ export namespace VxeTablePropTypes {
       replaceValue: string;
       result: VxeTableProDefines.FindAndReplaceResult[];
       $table: VxeTableConstructor & VxeTablePrivateMethods;
+      $grid: VxeGridConstructor | null | undefined;
     }) => void;
   }
   export interface FNROpts extends FNRConfig { }