vxe-table 3.20.0-beta.9 → 3.20.0

package/packages/table/src/table.ts

@@ -342,7 +342,11 @@ function renderRowExpandedVNs (h: CreateElement, $xeTable: VxeTableConstructor &
             rowid
           },
           style: cellStyle
-        }, expandColumn.renderData(h, expandParams))
+        }, [
+          h('div', {
+            class: 'vxe-body--row-expanded-content'
+          }, expandColumn.renderData(h, expandParams))
+        ])
       )
     })
   }
@@ -557,6 +561,7 @@ export default {
       reScrollFlag: 0,
       reLayoutFlag: 0,
       footFlag: 0,
+      kfFlag: 0,
       mergeFooteCellFlag: 0,
       crossTableDragRowInfo: crossTableDragRowGlobal
     }
@@ -792,6 +797,12 @@ export default {
 
       return Object.assign({}, getConfig().table.aggregateConfig || getConfig().table.rowGroupConfig, props.aggregateConfig || props.rowGroupConfig)
     },
+    computeAggregateAccuracyOpts () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.aggregateAccuracyConfig, props.aggregateAccuracyConfig)
+    },
     computeRowGroupOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
@@ -905,7 +916,16 @@ export default {
       return this.computeEditOpts
     },
     computeEditOpts () {
-      return Object.assign({}, getConfig().table.editConfig, this.editConfig)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.editConfig, props.editConfig)
+    },
+    computeEditDirtyOpts () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+
+      return Object.assign({}, getConfig().table.editDirtyConfig, props.editDirtyConfig)
     },
     sortOpts () {
       return this.computeSortOpts
@@ -1267,6 +1287,36 @@ export default {
       }
       return false
     },
+    computeKeepFields () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const { tableFullColumn } = internalData
+      const { updateColFlag } = reactData
+      const editDirtyOpts = $xeTable.computeEditDirtyOpts
+      const { includeFields, excludeFields } = editDirtyOpts
+      const kpFields: string[] = []
+      if (updateColFlag) {
+        if (includeFields && includeFields.length) {
+          return includeFields
+        }
+        const exfMaps: Record<string, number> = {}
+        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
@@ -1467,6 +1517,24 @@ export default {
       $xeTable.updateFooter()
     },
 
+    updateColFlag () {
+      this.kfFlag++
+    },
+    computeKeepFields () {
+      this.kfFlag++
+    },
+    kfFlag () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const keepFields = $xeTable.computeKeepFields
+      const kpfMaps: Record<string, number> = {}
+      keepFields.forEach(field => {
+        kpfMaps[field] = 1
+      })
+      internalData.keepUpdateFieldMaps = kpfMaps
+    },
+
     syncResize (value: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 

package/packages/table/src/util.ts

@@ -81,6 +81,8 @@ export function createInternalData (): TableInternalData {
     // 数据集（仅可视）
     visibleDataRowIdData: {},
 
+    keepUpdateFieldMaps: {},
+
     footerFullDataRowData: {},
 
     // 渲染中缓存数据
@@ -144,6 +146,7 @@ export function createInternalData (): TableInternalData {
 
 export function createReactData (): TableReactData {
   return {
+    updateColFlag: 0,
     // 低性能的静态列
     staticColumns: [],
     // 渲染的列分组
@@ -548,11 +551,19 @@ export function toTreePathSeq (path: any) {
   return path.map((num: any, i: any) => 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: VxeTablePropTypes.RowConfig, row: any, keyField: string) {
+  const { createKeyMethod } = rowOpts
+  if (createKeyMethod) {
+    return '' + createKeyMethod({ row, keyField })
+  }
+  return getRowUniqueId()
 }
 
 export function hasDeepKey (rowKey: string) {
@@ -576,11 +587,12 @@ export function getRowid ($xeTable: VxeTableConstructor, row: any) {
 export function createHandleUpdateRowId ($xeTable: VxeTableConstructor) {
   const internalData = $xeTable as unknown as TableInternalData
   const { isCurrDeepKey, currKeyField } = internalData
+  const rowOpts = $xeTable.computeRowOpts
   const updateRId = isCurrDeepKey ? updateDeepRowKey : updateFastRowKey
   return {
     rowKey: currKeyField,
     handleUpdateRowId (row: any) {
-      return row ? updateRId(row, currKeyField) : ''
+      return row ? updateRId(rowOpts, row, currKeyField) : ''
     }
   }
 }
@@ -606,10 +618,11 @@ function getDeepRowIdByKey (row: any, rowKey: string) {
   return XEUtils.get(row, rowKey)
 }
 
-export function updateDeepRowKey (row: any, rowKey: string) {
+function updateDeepRowKey (rowOpts: VxeTablePropTypes.RowConfig, row: any, rowKey: string) {
   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
@@ -619,11 +632,12 @@ function getFastRowIdByKey (row: any, rowKey: string) {
   return row[rowKey]
 }
 
-export function updateFastRowKey (row: any, rowKey: string) {
+function updateFastRowKey (rowOpts: VxeTablePropTypes.RowConfig, row: any, rowKey: string) {
   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
 }
@@ -933,7 +947,7 @@ export function rowToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMet
   return Promise.resolve()
 }
 
-export function colToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, column: VxeTableDefines.ColumnInfo, row?: any) {
+export function colToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, isForce: boolean, column: VxeTableDefines.ColumnInfo, row?: any) {
   const reactData = $xeTable as unknown as TableReactData
   const internalData = $xeTable as unknown as TableInternalData
 
@@ -960,27 +974,37 @@ export function colToVisible ($xeTable: VxeTableConstructor & VxeTablePrivateMet
       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/packages/ui/index.ts

@@ -46,6 +46,12 @@ VxeUI.setConfig({
       isSyncAutoWidth: true,
       minHeight: 18
     },
+    currentRowConfig: {
+      strict: true
+    },
+    currentColumnConfig: {
+      strict: true
+    },
     radioConfig: {
       // trigger: 'default'
       strict: true

package/styles/components/table-module/filter.scss

@@ -39,7 +39,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;
   &:not(.is--multiple) {
     .vxe-table--filter-header,
     .vxe-table--filter-body {

package/styles/components/table-module/menu.scss

@@ -16,7 +16,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 {
   display: flex;
@@ -46,7 +46,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);
   li {
     position: relative;
     margin: 1px 0;
@@ -55,11 +55,8 @@
       border: 0;
     }
     &.link--active {
-      background-color: #C5C5C5;
-      border-color:#C5C5C5;
-      & > .vxe-context-menu--link {
-        color: #2B2B2B;
-      }
+      background-color: var(--vxe-ui-base-hover-background-color);
+      border-color: var(--vxe-ui-base-hover-background-color);
     }
     &.link--loading,
     &.link--disabled {
@@ -68,8 +65,6 @@
         cursor: no-drop;
       }
       &.link--active {
-        border-color:#C0C1C2;
-        background-color: #EEEEEE;
         &:hover {
           background-color: inherit;
         }

package/styles/components/table.scss

@@ -2220,12 +2220,18 @@ $btnThemeList: (
     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;
     &.is--padding {
-      padding: var(--vxe-ui-table-expand-padding-default);
+      .vxe-body--row-expanded-content {
+        padding: var(--vxe-ui-table-expand-padding-default);
+      }
     }
   }
+  .vxe-body--row-expanded-content {
+    background-color: var(--vxe-ui-layout-background-color);
+  }
   .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);

package/styles/theme/base.scss

@@ -77,7 +77,6 @@
   --vxe-ui-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px var(--vxe-ui-table-fixed-scrolling-box-shadow-color);
 
   --vxe-ui-table-menu-item-width: 198px;
-  --vxe-ui-table-menu-background-color: #fff;
 
   --vxe-ui-table-validate-error-color: #f56c6c;
   --vxe-ui-table-validate-error-cell-background-color: rgba(245, 108,108, 0.1);