releases 4.0.28

2026-01-21 05:27:57 +08:00 · 2021-09-15 22:56:15 +08:00
parent e346d65e4a
commit bb52592ab9
8 changed files with 137 additions and 28 deletions
--- 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
            }
          }
        })
--- 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>
--- 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
--- 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",
--- 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)
      },
      /**
       * 加载列配置并恢复到初始状态
--- 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') {
--- 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';
--- 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 { }