vxe-table 4.7.76 → 4.7.78

package/packages/table/src/table.ts

@@ -1904,18 +1904,19 @@ export default defineComponent({
       return nextTick()
     }
 
-    const handleCheckedCheckboxRow = (rows: any, value: boolean, isForce?: boolean) => {
+    const handleCheckedCheckboxRow = (rows: any[], value: boolean, isForce?: boolean) => {
       if (rows && !XEUtils.isArray(rows)) {
         rows = [rows]
       }
-      rows.forEach((row: any) => tablePrivateMethods.handleSelectRow({ row }, !!value, isForce))
+      tablePrivateMethods.handleBatchSelectRows(rows, !!value, isForce)
+      tablePrivateMethods.checkSelectionStatus()
       return nextTick()
     }
 
     const handleCheckedAllCheckboxRow = (value: boolean, isForce?: boolean) => {
       const { treeConfig } = props
       const { selectCheckboxMaps } = reactData
-      const { afterFullData, afterFullRowMaps, checkboxReserveRowMap } = internalData
+      const { afterFullData, checkboxReserveRowMap } = internalData
       const treeOpts = computeTreeOpts.value
       const childrenField = treeOpts.children || treeOpts.childrenField
       const checkboxOpts = computeCheckboxOpts.value
@@ -1923,16 +1924,6 @@ export default defineComponent({
       const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField
       const selectRowMaps: Record<string, any> = {}
 
-      // 疑惑！
-      if (!treeConfig) {
-        XEUtils.each(selectCheckboxMaps, (row, rowid) => {
-          if (!afterFullRowMaps[rowid]) {
-            selectRowMaps[rowid] = row
-          }
-        })
-      }
-      // 疑惑！
-
       if (checkStrictly) {
         reactData.isAllSelected = value
       } else {
@@ -2867,7 +2858,13 @@ export default defineComponent({
           if (!XEUtils.isArray(rows)) {
             rest = [rows]
           }
-          rest.forEach(item => Object.assign(item, record))
+          const rowkey = getRowkey($xeTable)
+          rest.forEach(row => {
+            const rowid = getRowid($xeTable, row)
+            const newRecord = XEUtils.clone(Object.assign({}, record), true)
+            XEUtils.set(newRecord, rowkey, rowid)
+            Object.assign(row, newRecord)
+          })
         }
         return nextTick()
       },
@@ -2887,11 +2884,14 @@ export default defineComponent({
           const oRow = tableSourceData[rowIndex]
           if (oRow && row) {
             if (field) {
-              const newValue = XEUtils.get(record || row, field)
+              const newValue = XEUtils.clone(XEUtils.get(record || row, field), true)
               XEUtils.set(row, field, newValue)
               XEUtils.set(oRow, field, newValue)
             } else {
-              const newRecord = XEUtils.clone({ ...record }, true)
+              const rowkey = getRowkey($xeTable)
+              const rowid = getRowid($xeTable, row)
+              const newRecord = XEUtils.clone(Object.assign({}, record), true)
+              XEUtils.set(newRecord, rowkey, rowid)
               XEUtils.destructuring(oRow, Object.assign(row, newRecord))
             }
           }
@@ -3651,7 +3651,10 @@ export default defineComponent({
        * @param {Array/Row} rows 行数据
        * @param {Boolean} value 是否选中
        */
-      setCheckboxRow (rows: any, value) {
+      setCheckboxRow (rows, value) {
+        if (rows && !XEUtils.isArray(rows)) {
+          rows = [rows]
+        }
         return handleCheckedCheckboxRow(rows, value, true)
       },
       isCheckedByCheckboxRow (row) {
@@ -3676,6 +3679,7 @@ export default defineComponent({
         const { checkField } = checkboxOpts
         const value = checkField ? !XEUtils.get(row, checkField) : !selectCheckboxMaps[getRowid($xeTable, row)]
         tablePrivateMethods.handleSelectRow({ row }, value, true)
+        tablePrivateMethods.checkSelectionStatus()
         return nextTick()
       },
       /**
@@ -5692,13 +5696,63 @@ export default defineComponent({
         }
       },
       /**
+       * 多行
+       * 多选，行选中事件
+       * value 选中true 不选false 半选-1
+       */
+      handleBatchSelectRows (rows, value, isForce) {
+        const { treeConfig } = props
+        const { selectCheckboxMaps } = reactData
+        const selectRowMaps = Object.assign({}, selectCheckboxMaps)
+        const checkboxOpts = computeCheckboxOpts.value
+        const { checkField, checkStrictly, checkMethod } = checkboxOpts
+        if (checkField) {
+          if (treeConfig && !checkStrictly) {
+            rows.forEach(row => {
+              tablePrivateMethods.handleSelectRow({ row }, value, isForce)
+            })
+          } else {
+            rows.forEach(row => {
+              if (isForce || (!checkMethod || checkMethod({ row }))) {
+                XEUtils.set(row, checkField, value)
+                handleCheckboxReserveRow(row, value)
+              }
+            })
+          }
+        } else {
+          if (treeConfig && !checkStrictly) {
+            rows.forEach(row => {
+              tablePrivateMethods.handleSelectRow({ row }, value, isForce)
+            })
+          } else {
+            rows.forEach(row => {
+              const rowid = getRowid($xeTable, row)
+              if (isForce || (!checkMethod || checkMethod({ row }))) {
+                if (value) {
+                  if (!selectRowMaps[rowid]) {
+                    selectRowMaps[rowid] = row
+                  }
+                } else {
+                  if (selectRowMaps[rowid]) {
+                    delete selectRowMaps[rowid]
+                  }
+                }
+                handleCheckboxReserveRow(row, value)
+              }
+            })
+          }
+        }
+        reactData.selectCheckboxMaps = selectRowMaps
+      },
+      /**
+       * 单行
        * 多选，行选中事件
        * value 选中true 不选false 半选-1
        */
       handleSelectRow ({ row }, value, isForce) {
         const { treeConfig } = props
         const { selectCheckboxMaps, treeIndeterminateMaps } = reactData
-        const selectRowMaps = { ...selectCheckboxMaps }
+        const selectRowMaps = Object.assign({}, selectCheckboxMaps)
         const { afterFullData } = internalData
         const treeOpts = computeTreeOpts.value
         const childrenField = treeOpts.children || treeOpts.childrenField
@@ -5763,7 +5817,8 @@ export default defineComponent({
                 parentStatus = selectItems.filter(item => vItemMaps[getRowid($xeTable, item)]).length === vItems.length ? true : (selectItems.length || value === -1 ? -1 : false)
               }
               reactData.selectCheckboxMaps = selectRowMaps
-              return tablePrivateMethods.handleSelectRow({ row: matchObj.parent }, parentStatus, isForce)
+              tablePrivateMethods.handleSelectRow({ row: matchObj.parent }, parentStatus, isForce)
+              return
             }
           } else {
             if (isForce || (!checkMethod || checkMethod({ row }))) {
@@ -5838,7 +5893,8 @@ export default defineComponent({
                 parentStatus = selectItems.filter(item => vItemMaps[getRowid($xeTable, item)]).length === vItems.length ? true : (selectItems.length || value === -1 ? -1 : false)
               }
               reactData.selectCheckboxMaps = selectRowMaps
-              return tablePrivateMethods.handleSelectRow({ row: matchObj.parent }, parentStatus, isForce)
+              tablePrivateMethods.handleSelectRow({ row: matchObj.parent }, parentStatus, isForce)
+              return
             }
           } else {
             if (isForce || (!checkMethod || checkMethod({ row }))) {
@@ -5856,7 +5912,6 @@ export default defineComponent({
           }
         }
         reactData.selectCheckboxMaps = selectRowMaps
-        tablePrivateMethods.checkSelectionStatus()
       },
       triggerHeaderTitleEvent (evnt, iconParams, params) {
         const tipContent = iconParams.content || (iconParams as any).message
@@ -6102,6 +6157,7 @@ export default defineComponent({
           tablePrivateMethods.triggerCheckRowEvent(evnt, params, value)
         } else {
           tablePrivateMethods.handleSelectRow(params, value)
+          tablePrivateMethods.checkSelectionStatus()
         }
       },
       triggerCheckRowEvent (evnt: MouseEvent, params, value) {
@@ -6130,6 +6186,7 @@ export default defineComponent({
         }
         if (!checkMethod || checkMethod({ row })) {
           tablePrivateMethods.handleSelectRow(params, value)
+          tablePrivateMethods.checkSelectionStatus()
           tableMethods.dispatchEvent('checkbox-change', Object.assign({
             records: tableMethods.getCheckboxRecords(),
             reserves: tableMethods.getCheckboxReserveRecords(),
@@ -6911,9 +6968,7 @@ export default defineComponent({
       globalEvents.on($xeTable, 'mousewheel', handleGlobalMousewheelEvent)
       globalEvents.on($xeTable, 'keydown', handleGlobalKeydownEvent)
       globalEvents.on($xeTable, 'resize', handleGlobalResizeEvent)
-      if ($xeTable.handleGlobalContextmenuEvent) {
-        globalEvents.on($xeTable, 'contextmenu', $xeTable.handleGlobalContextmenuEvent)
-      }
+      globalEvents.on($xeTable, 'contextmenu', $xeTable.handleGlobalContextmenuEvent)
       tablePrivateMethods.preventEvent(null, 'mounted', { $table: $xeTable })
     })
 
@@ -7119,7 +7174,7 @@ export default defineComponent({
           })
           : createCommentVNode(),
         /**
-         * 导出/导出
+         * 导出
          */
         initStore.export && (props.exportConfig || props.printConfig)
           ? h(TableExportPanelComponent, {

package/packages/table/src/util.ts

@@ -120,7 +120,7 @@ export function getRowid ($xeTable: VxeTableConstructor, row: any) {
 }
 
 export interface XEColumnInstance {
-  column: ColumnInfo;
+  columnConfig: ColumnInfo;
 }
 
 export const handleFieldOrColumn = ($xeTable: VxeTableConstructor, fieldOrColumn: string | VxeTableDefines.ColumnInfo | null) => {
@@ -294,7 +294,7 @@ export function assembleColumn ($xeTable: VxeTableConstructor & VxeTablePrivateM
   const { reactData } = $xeTable
   const { staticColumns } = reactData
   const parentElem = elem.parentNode
-  const parentColumn = colgroup ? colgroup.column : null
+  const parentColumn = colgroup ? colgroup.columnConfig : null
   const parentCols = parentColumn ? parentColumn.children : staticColumns
   if (parentElem && parentCols) {
     parentCols.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, column)

package/packages/toolbar/src/toolbar.ts

@@ -4,8 +4,8 @@ import { VxeUI } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeButtonComponent, VxeButtonEvents } from 'vxe-pc-ui'
-import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData } from '../../../types'
+import type { ValueOf, VxeButtonComponent, VxeButtonEvents } from 'vxe-pc-ui'
+import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, ToolbarInternalData, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, ToolbarPrivateRef, ToolbarReactData } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, commands, createEvent, useFns } = VxeUI
 
@@ -19,10 +19,22 @@ export default defineComponent({
     print: [Boolean, Object] as PropType<VxeToolbarPropTypes.Print>,
     zoom: [Boolean, Object] as PropType< VxeToolbarPropTypes.Zoom>,
     custom: [Boolean, Object] as PropType<VxeToolbarPropTypes.Custom>,
-    buttons: { type: Array as PropType<VxeToolbarPropTypes.Buttons>, default: () => getConfig().toolbar.buttons },
-    tools: { type: Array as PropType<VxeToolbarPropTypes.Tools>, default: () => getConfig().toolbar.tools },
-    perfect: { type: Boolean as PropType<VxeToolbarPropTypes.Perfect>, default: () => getConfig().toolbar.perfect },
-    size: { type: String as PropType<VxeToolbarPropTypes.Size>, default: () => getConfig().toolbar.size || getConfig().size },
+    buttons: {
+      type: Array as PropType<VxeToolbarPropTypes.Buttons>,
+      default: () => getConfig().toolbar.buttons
+    },
+    tools: {
+      type: Array as PropType<VxeToolbarPropTypes.Tools>,
+      default: () => getConfig().toolbar.tools
+    },
+    perfect: {
+      type: Boolean as PropType<VxeToolbarPropTypes.Perfect>,
+      default: () => getConfig().toolbar.perfect
+    },
+    size: {
+      type: String as PropType<VxeToolbarPropTypes.Size>,
+      default: () => getConfig().toolbar.size || getConfig().size
+    },
     className: [String, Function] as PropType<VxeToolbarPropTypes.ClassName>
   },
   emits: [
@@ -41,9 +53,14 @@ export default defineComponent({
 
     const reactData = reactive<ToolbarReactData>({
       isRefresh: false,
+      connectFlag: 0,
       columns: []
     })
 
+    const internalData: ToolbarInternalData = {
+      connectTable: null
+    }
+
     const refElem = ref() as Ref<HTMLDivElement>
 
     const refMaps: ToolbarPrivateRef = {
@@ -55,15 +72,13 @@ export default defineComponent({
       props,
       context,
       reactData,
+      internalData,
       getRefMaps: () => refMaps
     } as unknown as VxeToolbarConstructor
 
     let toolbarMethods = {} as ToolbarMethods
 
-    const $xeGrid = inject('$xeGrid', null as (VxeGridConstructor & GridPrivateMethods) | null)
-    const refTable = ref<VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods>()
-
-    const connectFlag = ref(0)
+    const $xeGrid = inject<(VxeGridConstructor & GridPrivateMethods) | null>('$xeGrid', null)
 
     const computeRefreshOpts = computed(() => {
       return Object.assign({}, getConfig().toolbar.refresh, props.refresh) as VxeToolbarPropTypes.RefreshOpts
@@ -90,8 +105,9 @@ export default defineComponent({
     })
 
     const computeTableCustomOpts = computed(() => {
-      const $table = refTable.value
-      if (connectFlag.value || $table) {
+      const { connectTable } = internalData
+      const $table = connectTable
+      if (reactData.connectFlag || $table) {
         if ($table) {
           const { computeCustomOpts } = $table.getComputeMaps()
           return computeCustomOpts.value
@@ -106,7 +122,8 @@ export default defineComponent({
     })
 
     const checkTable = () => {
-      const $table = refTable.value
+      const { connectTable } = internalData
+      const $table = connectTable
       if ($table) {
         return true
       }
@@ -114,7 +131,8 @@ export default defineComponent({
     }
 
     const handleClickSettingEvent = ({ $event }: any) => {
-      const $table = refTable.value
+      const { connectTable } = internalData
+      const $table = connectTable
       if ($table) {
         if ($table.triggerCustomEvent) {
           $table.triggerCustomEvent($event)
@@ -125,7 +143,8 @@ export default defineComponent({
     }
 
     const handleMouseenterSettingEvent = ({ $event }: any) => {
-      const $table = refTable.value
+      const { connectTable } = internalData
+      const $table = connectTable
       if ($table) {
         $table.customOpenEvent($event)
       } else {
@@ -134,7 +153,8 @@ export default defineComponent({
     }
 
     const handleMouseleaveSettingEvent = ({ $event }: any) => {
-      const $table = refTable.value
+      const { connectTable } = internalData
+      const $table = connectTable
       if ($table) {
         const { customStore } = $table.reactData
         customStore.activeBtn = false
@@ -176,7 +196,8 @@ export default defineComponent({
     }
 
     const btnEvent = (evnt: Event, item: VxeToolbarPropTypes.ButtonConfig) => {
-      const $table = refTable.value
+      const { connectTable } = internalData
+      const $table = connectTable
       const { code } = item
       if (code) {
         if ($xeGrid) {
@@ -200,7 +221,8 @@ export default defineComponent({
     }
 
     const tolEvent = (evnt: Event, item: VxeToolbarPropTypes.ButtonConfig) => {
-      const $table = refTable.value
+      const { connectTable } = internalData
+      const $table = connectTable
       const { code } = item
       if (code) {
         if ($xeGrid) {
@@ -225,7 +247,8 @@ export default defineComponent({
 
     const importEvent = () => {
       if (checkTable()) {
-        const $table = refTable.value
+        const { connectTable } = internalData
+        const $table = connectTable
         if ($table) {
           $table.openImport()
         }
@@ -234,7 +257,8 @@ export default defineComponent({
 
     const exportEvent = () => {
       if (checkTable()) {
-        const $table = refTable.value
+        const { connectTable } = internalData
+        const $table = connectTable
         if ($table) {
           $table.openExport()
         }
@@ -243,13 +267,29 @@ export default defineComponent({
 
     const printEvent = () => {
       if (checkTable()) {
-        const $table = refTable.value
+        const { connectTable } = internalData
+        const $table = connectTable
         if ($table) {
           $table.openPrint()
         }
       }
     }
 
+    const dispatchEvent = (type: ValueOf<VxeToolbarEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $toolbar: $xeToolbar }, params))
+    }
+
+    toolbarMethods = {
+      dispatchEvent,
+      syncUpdate (params) {
+        internalData.connectTable = params.$table
+        reactData.columns = params.collectColumn
+        reactData.connectFlag++
+      }
+    }
+
+    Object.assign($xeToolbar, toolbarMethods)
+
     const renderDropdowns = (item: VxeToolbarPropTypes.ButtonConfig, isBtn: boolean) => {
       const { dropdowns } = item
       const downVNs: VNode[] = []
@@ -283,11 +323,8 @@ export default defineComponent({
      */
     const renderBtns = () => {
       const { buttons } = props
-      const $table = refTable.value
-      const buttonsSlot = slots.buttons
-      if (buttonsSlot) {
-        return getSlotVNs(buttonsSlot({ $grid: $xeGrid, $table: $table }))
-      }
+      const { connectTable } = internalData
+      const $table = connectTable
       const btnVNs: VNode[] = []
       if (buttons) {
         buttons.forEach((item) => {
@@ -339,11 +376,8 @@ export default defineComponent({
      */
     const renderRightTools = () => {
       const { tools } = props
-      const $table = refTable.value
-      const toolsSlot = slots.tools
-      if (toolsSlot) {
-        return getSlotVNs(toolsSlot({ $grid: $xeGrid, $table: $table }))
-      }
+      const { connectTable } = internalData
+      const $table = connectTable
       const btnVNs: VNode[] = []
       if (tools) {
         tools.forEach((item, tIndex) => {
@@ -487,47 +521,14 @@ export default defineComponent({
         : createCommentVNode()
     }
 
-    toolbarMethods = {
-      dispatchEvent (type, params, evnt) {
-        emit(type, createEvent(evnt, { $toolbar: $xeToolbar }, params))
-      },
-      syncUpdate (params) {
-        const { collectColumn } = params
-        refTable.value = params.$table
-        reactData.columns = collectColumn
-        connectFlag.value++
-      }
-    }
-
-    Object.assign($xeToolbar, toolbarMethods)
-
-    nextTick(() => {
-      const { refresh } = props
-      const refreshOpts = computeRefreshOpts.value
-      const queryMethod = refreshOpts.queryMethod || refreshOpts.query
-      if (refresh && !$xeGrid && !queryMethod) {
-        warnLog('vxe.error.notFunc', ['queryMethod'])
-      }
-      const customOpts = computeCustomOpts.value
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        if (customOpts.isFooter) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter'])
-        }
-        if (customOpts.showFooter) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter'])
-        }
-        if (customOpts.immediate) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate'])
-        }
-        if (customOpts.trigger) {
-          warnLog('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger'])
-        }
-      }
-    })
-
     const renderVN = () => {
       const { perfect, loading, refresh, zoom, custom, className } = props
+      const { connectTable } = internalData
       const vSize = computeSize.value
+      const toolsSlot = slots.tools
+      const buttonsSlot = slots.buttons
+      const $table = connectTable
+
       return h('div', {
         ref: refElem,
         class: ['vxe-toolbar', className ? (XEUtils.isFunction(className) ? className({ $toolbar: $xeToolbar }) : className) : '', {
@@ -538,10 +539,10 @@ export default defineComponent({
       }, [
         h('div', {
           class: 'vxe-buttons--wrapper'
-        }, renderBtns()),
+        }, buttonsSlot ? buttonsSlot({ $grid: $xeGrid, $table: $table }) : renderBtns()),
         h('div', {
           class: 'vxe-tools--wrapper'
-        }, renderRightTools()),
+        }, toolsSlot ? toolsSlot({ $grid: $xeGrid, $table: $table }) : renderRightTools()),
         h('div', {
           class: 'vxe-tools--operate'
         }, [
@@ -557,15 +558,36 @@ export default defineComponent({
 
     $xeToolbar.renderVN = renderVN
 
-    if (process.env.VUE_APP_VXE_ENV === 'development') {
-      nextTick(() => {
+    nextTick(() => {
+      const { refresh } = props
+      const refreshOpts = computeRefreshOpts.value
+      const queryMethod = refreshOpts.queryMethod || refreshOpts.query
+      if (refresh && !$xeGrid && !queryMethod) {
+        warnLog('vxe.error.notFunc', ['queryMethod'])
+      }
+      const customOpts = computeCustomOpts.value
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
+        if (customOpts.isFooter) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.isFooter', 'table.custom-config.showFooter'])
+        }
+        if (customOpts.showFooter) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.showFooter', 'table.custom-config.showFooter'])
+        }
+        if (customOpts.immediate) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.immediate', 'table.custom-config.immediate'])
+        }
+        if (customOpts.trigger) {
+          warnLog('vxe.error.delProp', ['toolbar.custom.trigger', 'table.custom-config.trigger'])
+        }
+      }
+      if (process.env.VUE_APP_VXE_ENV === 'development') {
         if (props.refresh || props.import || props.export || props.print || props.zoom) {
           if (!VxeUIButtonComponent) {
             errLog('vxe.error.reqComp', ['vxe-button'])
           }
         }
-      })
-    }
+      }
+    })
 
     return $xeToolbar
   },