vxe-table 4.11.16 → 4.12.0-beta.1

package/README.md

@@ -28,14 +28,15 @@
     * [x] ~~v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11~~
     * [x] v3.9 基于 vue2.6+，内部重构，拆分 Table 库和 UI 库，只支持现代浏览器，不支持 IE
     * [x] v3.13 重构展开行功能，同时支持展开行与虚拟渲染和冻结列
+    * [x] v3.14 重构虚拟渲染，支持百万级数据渲染、渲染性能及流畅度大幅提升
   * **V4**
     * [x] ~~v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE~~
     * [x] v4.7 基于 vue3.2+，内部重构，拆分 Table 库和 UI 库，只支持现代浏览器，不支持 IE
     * [x] v4.11 重构展开行功能，同时支持展开行与虚拟渲染和冻结列
+    * [x] v4.12 重构虚拟渲染，支持百万级数据渲染、渲染性能及流畅度大幅提升
 * 版本计划
-    * [ ] 虚拟滚动渲染性能提升到极致
-    * [ ] 虚拟渲染，支持百万级数据渲染
-    * [ ] 虚拟渲染，支持千万级数据渲染
+    * [ ] 优化展开行与冻结列
+    * [ ] 优化虚拟渲染，支持千万级数据渲染
     * [ ] 数据图表可视化
 
 ## 浏览器支持

package/es/grid/src/grid.js

@@ -139,30 +139,29 @@ export default defineComponent({
         });
         const computeTableProps = computed(() => {
             const { seqConfig, pagerConfig, loading, editConfig, proxyConfig } = props;
-            const { isZMax, tableLoading, tablePage, tableData } = reactData;
+            const { isZMax, tableLoading, tablePage } = reactData;
             const tableExtendProps = computeTableExtendProps.value;
             const proxyOpts = computeProxyOpts.value;
             const pagerOpts = computePagerOpts.value;
-            const tableProps = Object.assign({}, tableExtendProps);
+            const tProps = Object.assign({}, tableExtendProps);
             if (isZMax) {
                 if (tableExtendProps.maxHeight) {
-                    tableProps.maxHeight = '100%';
+                    tProps.maxHeight = '100%';
                 }
                 else {
-                    tableProps.height = '100%';
+                    tProps.height = '100%';
                 }
             }
             if (proxyConfig && isEnableConf(proxyOpts)) {
-                tableProps.loading = loading || tableLoading;
-                tableProps.data = tableData;
+                tProps.loading = loading || tableLoading;
                 if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
-                    tableProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
+                    tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize });
                 }
             }
             if (editConfig) {
-                tableProps.editConfig = Object.assign({}, editConfig);
+                tProps.editConfig = Object.assign({}, editConfig);
             }
-            return tableProps;
+            return tProps;
         });
         const computeCurrLayoutConf = computed(() => {
             const { layouts } = props;
@@ -877,6 +876,7 @@ export default defineComponent({
                             reactData.tableLoading = true;
                             return Promise.resolve((beforeQuery || ajaxMethods)(commitParams, ...args))
                                 .then(rest => {
+                                let tableData = [];
                                 reactData.tableLoading = false;
                                 if (rest) {
                                     if (pagerConfig && isEnableConf(pagerOpts)) {
@@ -884,7 +884,7 @@ export default defineComponent({
                                         const total = (XEUtils.isFunction(totalProp) ? totalProp({ data: rest, $grid: $xeGrid }) : XEUtils.get(rest, totalProp || 'page.total')) || 0;
                                         tablePage.total = XEUtils.toNumber(total);
                                         const resultProp = resConfigs.result;
-                                        reactData.tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $grid: $xeGrid }) : XEUtils.get(rest, resultProp || 'result')) || [];
+                                        tableData = (XEUtils.isFunction(resultProp) ? resultProp({ data: rest, $grid: $xeGrid }) : XEUtils.get(rest, resultProp || 'result')) || [];
                                         // 检验当前页码，不能超出当前最大页数
                                         const pageCount = Math.max(Math.ceil(total / tablePage.pageSize), 1);
                                         if (tablePage.currentPage > pageCount) {
@@ -893,11 +893,18 @@ export default defineComponent({
                                     }
                                     else {
                                         const listProp = resConfigs.list;
-                                        reactData.tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: $xeGrid }) : XEUtils.get(rest, listProp)) : rest) || [];
+                                        tableData = (listProp ? (XEUtils.isFunction(listProp) ? listProp({ data: rest, $grid: $xeGrid }) : XEUtils.get(rest, listProp)) : rest) || [];
                                     }
                                 }
+                                if ($xeTable) {
+                                    $xeTable.loadData(tableData);
+                                }
                                 else {
-                                    reactData.tableData = [];
+                                    nextTick(() => {
+                                        if ($xeTable) {
+                                            $xeTable.loadData(tableData);
+                                        }
+                                    });
                                 }
                                 if (afterQuery) {
                                     afterQuery(commitParams, ...args);
@@ -1110,7 +1117,7 @@ export default defineComponent({
                 if (props.proxyConfig) {
                     const { sortData } = reactData;
                     return {
-                        data: reactData.tableData,
+                        data: $xeTable ? $xeTable.getFullData() : [],
                         filter: reactData.filterData,
                         form: getFormData(),
                         sort: sortData.length ? sortData[0] : {},