vxe-table 3.20.0-beta.8 → 3.20.0

package/es/table/src/table.js

@@ -316,7 +316,11 @@ function renderRowExpandedVNs(h, $xeTable) {
                     rowid
                 },
                 style: cellStyle
-            }, expandColumn.renderData(h, expandParams)));
+            }, [
+                h('div', {
+                    class: 'vxe-body--row-expanded-content'
+                }, expandColumn.renderData(h, expandParams))
+            ]));
         });
     }
     return h('div', {
@@ -514,7 +518,7 @@ export default {
         const reactData = createReactData();
         return Object.assign(Object.assign({ xID }, reactData), { 
             // 私有属性
-            reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal });
+            reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, kfFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal });
     },
     computed: Object.assign(Object.assign({}, {}), { tableId() {
             return this.computeTableId;
@@ -724,6 +728,11 @@ export default {
             const props = $xeTable;
             return Object.assign({}, getConfig().table.aggregateConfig || getConfig().table.rowGroupConfig, props.aggregateConfig || props.rowGroupConfig);
         },
+        computeAggregateAccuracyOpts() {
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.aggregateAccuracyConfig, props.aggregateAccuracyConfig);
+        },
         computeRowGroupOpts() {
             const $xeTable = this;
             return $xeTable.computeAggregateOpts;
@@ -823,7 +832,14 @@ export default {
             return this.computeEditOpts;
         },
         computeEditOpts() {
-            return Object.assign({}, getConfig().table.editConfig, this.editConfig);
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.editConfig, props.editConfig);
+        },
+        computeEditDirtyOpts() {
+            const $xeTable = this;
+            const props = $xeTable;
+            return Object.assign({}, getConfig().table.editDirtyConfig, props.editDirtyConfig);
         },
         sortOpts() {
             return this.computeSortOpts;
@@ -1171,6 +1187,35 @@ export default {
             }
             return false;
         },
+        computeKeepFields() {
+            const $xeTable = this;
+            const reactData = $xeTable;
+            const internalData = $xeTable;
+            const { tableFullColumn } = internalData;
+            const { updateColFlag } = reactData;
+            const editDirtyOpts = $xeTable.computeEditDirtyOpts;
+            const { includeFields, excludeFields } = editDirtyOpts;
+            const kpFields = [];
+            if (updateColFlag) {
+                if (includeFields && includeFields.length) {
+                    return includeFields;
+                }
+                const exfMaps = {};
+                if (excludeFields && excludeFields.length) {
+                    excludeFields.forEach(field => {
+                        exfMaps[field] = 1;
+                    });
+                }
+                for (let i = 0; i < tableFullColumn.length; i++) {
+                    const column = tableFullColumn[i];
+                    const { field, type, editRender, cellRender } = column;
+                    if (field && !type && (editRender || cellRender) && !exfMaps[field]) {
+                        kpFields.push(field);
+                    }
+                }
+            }
+            return kpFields;
+        },
         computeTableBorder() {
             const $xeTable = this;
             const props = $xeTable;
@@ -1355,6 +1400,22 @@ export default {
             internalData.footerFullDataRowData = {};
             $xeTable.updateFooter();
         },
+        updateColFlag() {
+            this.kfFlag++;
+        },
+        computeKeepFields() {
+            this.kfFlag++;
+        },
+        kfFlag() {
+            const $xeTable = this;
+            const internalData = $xeTable;
+            const keepFields = $xeTable.computeKeepFields;
+            const kpfMaps = {};
+            keepFields.forEach(field => {
+                kpfMaps[field] = 1;
+            });
+            internalData.keepUpdateFieldMaps = kpfMaps;
+        },
         syncResize(value) {
             const $xeTable = this;
             if (value) {
@@ -1801,6 +1862,7 @@ export default {
     beforeDestroy() {
         const $xeTable = this;
         const reactData = $xeTable;
+        const internalData = $xeTable;
         const teleportWrapperEl = $xeTable.$refs.refTeleportWrapper;
         if (teleportWrapperEl && teleportWrapperEl.parentElement) {
             teleportWrapperEl.parentElement.removeChild(teleportWrapperEl);
@@ -1828,14 +1890,13 @@ export default {
         globalEvents.off($xeTable, 'keydown');
         globalEvents.off($xeTable, 'resize');
         globalEvents.off($xeTable, 'contextmenu');
-        this.preventEvent(null, 'beforeDestroy');
+        $xeTable.preventEvent(null, 'beforeDestroy');
         XEUtils.assign(reactData, createReactData());
+        XEUtils.assign(internalData, createInternalData());
     },
     destroyed() {
         const $xeTable = this;
-        const internalData = $xeTable;
-        this.preventEvent(null, 'destroyed');
-        XEUtils.assign(internalData, createInternalData());
+        $xeTable.preventEvent(null, 'destroyed');
     },
     render(h) {
         // 使用已安装的组件，如果未安装则不渲染

package/es/table/src/util.js

@@ -76,6 +76,7 @@ export function createInternalData() {
         fullDataRowIdData: {},
         // 数据集（仅可视）
         visibleDataRowIdData: {},
+        keepUpdateFieldMaps: {},
         footerFullDataRowData: {},
         // 渲染中缓存数据
         sourceDataRowIdData: {},
@@ -131,6 +132,7 @@ export function createInternalData() {
 }
 export function createReactData() {
     return {
+        updateColFlag: 0,
         // 低性能的静态列
         staticColumns: [],
         // 渲染的列分组
@@ -512,11 +514,18 @@ export function restoreScrollLocation($xeTable, scrollLeft, scrollTop) {
 export function toTreePathSeq(path) {
     return path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('');
 }
+export function getRowUniqueId() {
+    return XEUtils.uniqueId('row_');
+}
 /**
  * 生成行的唯一主键
  */
-export function getRowUniqueId() {
-    return XEUtils.uniqueId('row_');
+export function createRowId(rowOpts, row, keyField) {
+    const { createKeyMethod } = rowOpts;
+    if (createKeyMethod) {
+        return '' + createKeyMethod({ row, keyField });
+    }
+    return getRowUniqueId();
 }
 export function hasDeepKey(rowKey) {
     return rowKey.indexOf('.') > -1;
@@ -536,11 +545,12 @@ export function getRowid($xeTable, row) {
 export function createHandleUpdateRowId($xeTable) {
     const internalData = $xeTable;
     const { isCurrDeepKey, currKeyField } = internalData;
+    const rowOpts = $xeTable.computeRowOpts;
     const updateRId = isCurrDeepKey ? updateDeepRowKey : updateFastRowKey;
     return {
         rowKey: currKeyField,
         handleUpdateRowId(row) {
-            return row ? updateRId(row, currKeyField) : '';
+            return row ? updateRId(rowOpts, row, currKeyField) : '';
         }
     };
 }
@@ -562,10 +572,11 @@ export function encodeRowid(rowVal) {
 function getDeepRowIdByKey(row, rowKey) {
     return XEUtils.get(row, rowKey);
 }
-export function updateDeepRowKey(row, rowKey) {
+function updateDeepRowKey(rowOpts, row, rowKey) {
     let rowid = encodeRowid(getDeepRowIdByKey(row, rowKey));
     if (eqEmptyValue(rowid)) {
-        rowid = getRowUniqueId();
+        const newRowid = createRowId(rowOpts, row, rowKey);
+        rowid = '' + newRowid;
         XEUtils.set(row, rowKey, rowid);
     }
     return rowid;
@@ -573,11 +584,12 @@ export function updateDeepRowKey(row, rowKey) {
 function getFastRowIdByKey(row, rowKey) {
     return row[rowKey];
 }
-export function updateFastRowKey(row, rowKey) {
+function updateFastRowKey(rowOpts, row, rowKey) {
     let rowid = encodeRowid(getFastRowIdByKey(row, rowKey));
     if (eqEmptyValue(rowid)) {
-        rowid = getRowUniqueId();
-        row[rowKey] = rowid;
+        const newRowid = createRowId(rowOpts, row, rowKey);
+        rowid = '' + newRowid;
+        row[rowKey] = newRowid;
     }
     return rowid;
 }
@@ -857,7 +869,7 @@ export function rowToVisible($xeTable, row) {
     }
     return Promise.resolve();
 }
-export function colToVisible($xeTable, column, row) {
+export function colToVisible($xeTable, isForce, column, row) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { scrollXLoad, scrollXLeft } = reactData;
@@ -883,29 +895,35 @@ export function colToVisible($xeTable, column, row) {
             const tdOffsetLeft = tdElem.offsetLeft + (scrollXLoad ? scrollXLeft : 0);
             const cellWidth = tdElem.clientWidth;
             // 检测是否在可视区中
-            if (tdOffsetLeft < (bodyScrollLeft + leftFixedWidth)) {
-                return $xeTable.scrollTo(tdOffsetLeft - leftFixedWidth - 1);
-            }
-            else if ((tdOffsetLeft + cellWidth - bodyScrollLeft) > (bodyWidth - rightFixedWidth)) {
-                return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - rightFixedWidth - 1));
+            if (isForce || (!(tdOffsetLeft <= (bodyScrollLeft + leftFixedWidth) && (tdOffsetLeft + cellWidth) > (bodyScrollLeft + leftFixedWidth)) &&
+                !(tdOffsetLeft >= (bodyScrollLeft + leftFixedWidth) && tdOffsetLeft < (bodyScrollLeft + bodyWidth - rightFixedWidth)))) {
+                if (tdOffsetLeft < (bodyScrollLeft + leftFixedWidth)) {
+                    return $xeTable.scrollTo(tdOffsetLeft - leftFixedWidth - 1);
+                }
+                else if ((tdOffsetLeft + cellWidth - bodyScrollLeft) > (bodyWidth - rightFixedWidth)) {
+                    return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - rightFixedWidth - 1));
+                }
             }
         }
         else {
-            // 检测是否在虚拟渲染可视区中
             if (scrollXLoad) {
-                let scrollLeft = 0;
+                let tdOffsetLeft = 0;
                 const cellWidth = column.renderWidth;
                 for (let i = 0; i < visibleColumn.length; i++) {
                     const currCol = visibleColumn[i];
                     if (currCol === column || currCol.id === column.id) {
                         break;
                     }
-                    scrollLeft += currCol.renderWidth;
+                    tdOffsetLeft += currCol.renderWidth;
                 }
-                if (scrollLeft < bodyScrollLeft) {
-                    return $xeTable.scrollTo(scrollLeft - leftFixedWidth - 1);
+                // 检测是否在可视区中
+                if (isForce || (!(tdOffsetLeft <= (bodyScrollLeft + leftFixedWidth) && (tdOffsetLeft + cellWidth) > (bodyScrollLeft + leftFixedWidth)) &&
+                    !(tdOffsetLeft >= (bodyScrollLeft + leftFixedWidth) && tdOffsetLeft < (bodyScrollLeft + bodyWidth - rightFixedWidth)))) {
+                    if (tdOffsetLeft < bodyScrollLeft) {
+                        return $xeTable.scrollTo(tdOffsetLeft - leftFixedWidth - 1);
+                    }
+                    return $xeTable.scrollTo((tdOffsetLeft + cellWidth) - (bodyWidth - rightFixedWidth - 1));
                 }
-                return $xeTable.scrollTo((scrollLeft + cellWidth) - (bodyWidth - rightFixedWidth - 1));
             }
         }
     }

package/es/table/style.css

@@ -1528,7 +1528,7 @@
   border: 1px solid var(--vxe-ui-base-popup-border-color);
   color: var(--vxe-ui-font-color);
   box-shadow: var(--vxe-ui-base-popup-box-shadow);
-  z-index: 10;
+  z-index: 15;
 }
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-header,
 .vxe-table--filter-wrapper:not(.is--multiple) .vxe-table--filter-body {
@@ -1668,7 +1668,7 @@
           user-select: none;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);
-  background-color: var(--vxe-ui-table-menu-background-color);
+  background-color: var(--vxe-ui-layout-background-color);
 }
 
 .vxe-context-menu--link {
@@ -1700,7 +1700,7 @@
   margin: 0;
   padding: 0;
   list-style-type: none;
-  border-bottom: 1px solid #E8EAED;
+  border-bottom: 1px solid var(--vxe-ui-base-popup-border-color);
 }
 .vxe-context-menu--option-wrapper li,
 .vxe-table--context-menu-clild-wrapper li {
@@ -1714,12 +1714,8 @@
 }
 .vxe-context-menu--option-wrapper li.link--active,
 .vxe-table--context-menu-clild-wrapper li.link--active {
-  background-color: #C5C5C5;
-  border-color: #C5C5C5;
-}
-.vxe-context-menu--option-wrapper li.link--active > .vxe-context-menu--link,
-.vxe-table--context-menu-clild-wrapper li.link--active > .vxe-context-menu--link {
-  color: #2B2B2B;
+  background-color: var(--vxe-ui-base-hover-background-color);
+  border-color: var(--vxe-ui-base-hover-background-color);
 }
 .vxe-context-menu--option-wrapper li.link--loading > .vxe-context-menu--link, .vxe-context-menu--option-wrapper li.link--disabled > .vxe-context-menu--link,
 .vxe-table--context-menu-clild-wrapper li.link--loading > .vxe-context-menu--link,
@@ -1727,12 +1723,6 @@
   color: var(--vxe-ui-font-disabled-color);
   cursor: no-drop;
 }
-.vxe-context-menu--option-wrapper li.link--loading.link--active, .vxe-context-menu--option-wrapper li.link--disabled.link--active,
-.vxe-table--context-menu-clild-wrapper li.link--loading.link--active,
-.vxe-table--context-menu-clild-wrapper li.link--disabled.link--active {
-  border-color: #C0C1C2;
-  background-color: #EEEEEE;
-}
 .vxe-context-menu--option-wrapper li.link--loading.link--active:hover, .vxe-context-menu--option-wrapper li.link--disabled.link--active:hover,
 .vxe-table--context-menu-clild-wrapper li.link--loading.link--active:hover,
 .vxe-table--context-menu-clild-wrapper li.link--disabled.link--active:hover {
@@ -3556,12 +3546,16 @@
   left: 0;
   width: 100%;
   overflow: auto;
-  background-color: var(--vxe-ui-layout-background-color);
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
   pointer-events: all;
 }
-.vxe-table--render-default .vxe-body--row-expanded-cell.is--padding {
+.vxe-table--render-default .vxe-body--row-expanded-cell.is--padding .vxe-body--row-expanded-content {
   padding: var(--vxe-ui-table-expand-padding-default);
 }
+.vxe-table--render-default .vxe-body--row-expanded-content {
+  background-color: var(--vxe-ui-layout-background-color);
+}
 .vxe-table--render-default .vxe-body--row-expanded-place-column {
   border-bottom: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
   border-right: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);