vxe-table 3.11.30 → 3.11.32

package/packages/table/src/cell.ts

@@ -53,22 +53,24 @@ function renderCellDragIcon (h: CreateElement, params: any) {
   const tableProps = $table
   const { dragConfig } = tableProps
   const rowDragOpts = $table.computeRowDragOpts
-  const { icon, disabledMethod } = rowDragOpts
+  const { icon, trigger, disabledMethod } = rowDragOpts
   const rDisabledMethod = disabledMethod || (dragConfig ? dragConfig.rowDisabledMethod : null)
   const isDisabled = rDisabledMethod && rDisabledMethod(params)
+  const ons: Record<string, any> = {}
+  if (trigger !== 'cell') {
+    ons.mousedown = (evnt: MouseEvent) => {
+      if (!isDisabled) {
+        $table.handleCellDragMousedownEvent(evnt, params)
+      }
+    }
+    ons.mouseup = $table.handleCellDragMouseupEvent
+  }
   return h('span', {
     key: 'dg',
     class: ['vxe-cell--drag-handle', {
       'is--disabled': isDisabled
     }],
-    on: {
-      mousedown (evnt: DragEvent) {
-        if (!isDisabled) {
-          $table.handleCellDragMousedownEvent(evnt, params)
-        }
-      },
-      mouseup: $table.handleCellDragMouseupEvent
-    }
+    on: ons
   }, [
     h('i', {
       class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
@@ -106,23 +108,25 @@ function renderHeaderCellDragIcon (h: CreateElement, params: VxeTableDefines.Cel
   const { $table, column } = params
   const columnOpts = $table.computeColumnOpts
   const columnDragOpts = $table.computeColumnDragOpts
-  const { showIcon, icon, isCrossDrag, visibleMethod, disabledMethod } = columnDragOpts
-  const isDisabled = disabledMethod && disabledMethod(params)
+  const { showIcon, icon, trigger, isCrossDrag, visibleMethod, disabledMethod } = columnDragOpts
   if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
     if (!column.fixed && (isCrossDrag || !column.parentId)) {
+      const isDisabled = disabledMethod && disabledMethod(params)
+      const ons: Record<string, any> = {}
+      if (trigger !== 'cell') {
+        ons.mousedown = (evnt: MouseEvent) => {
+          if (!isDisabled) {
+            $table.handleHeaderCellDragMousedownEvent(evnt, params)
+          }
+        }
+        ons.mouseup = $table.handleHeaderCellDragMouseupEvent
+      }
       return h('span', {
         key: 'dg',
         class: ['vxe-cell--drag-handle', {
           'is--disabled': isDisabled
         }],
-        on: {
-          mousedown (evnt: MouseEvent) {
-            if (!isDisabled) {
-              $table.handleHeaderCellDragMousedownEvent(evnt, params)
-            }
-          },
-          mouseup: $table.handleHeaderCellDragMouseupEvent
-        }
+        on: ons
       }, [
         h('i', {
           class: icon || getIcon().TABLE_DRAG_COLUMN

package/packages/table/src/header.ts

@@ -12,9 +12,14 @@ const { renderer } = VxeUI
 const cellType = 'header'
 
 const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo[], $rowIndex: number) => {
-  const { $parent: $xetable, fixedType } = _vm
-  const { $listeners: tableListeners, resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, highlightCurrentColumn, currentColumn, scrollXLoad, overflowX, scrollbarWidth, sortOpts, mouseConfig, columnOpts } = $xetable
+  const $xeTable = _vm.$parent
+  const $xeGrid = $xeTable.xegrid
 
+  const { fixedType } = _vm
+
+  const { resizable: allResizable, border, columnKey, headerCellClassName, headerCellStyle, showHeaderOverflow: allColumnHeaderOverflow, headerAlign: allHeaderAlign, align: allAlign, currentColumn, scrollXLoad, overflowX, scrollbarWidth, mouseConfig, columnOpts } = $xeTable
+  const columnDragOpts = $xeTable.computeColumnDragOpts
+  const { disabledMethod: dragDisabledMethod } = columnDragOpts
   return cols.map((column: any, $columnIndex: any) => {
     const { type, showHeaderOverflow, headerAlign, align, headerClassName, editRender, cellRender } = column
     // const { enabled } = tooltipOpts
@@ -29,30 +34,40 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
     const showTitle = headOverflow === 'title'
     const showTooltip = headOverflow === true || headOverflow === 'tooltip'
     let hasEllipsis = showTitle || showTooltip || showEllipsis
-    const thOns: any = {}
     const hasFilter = column.filters && column.filters.some((item: any) => item.checked)
-    const columnIndex = $xetable.getColumnIndex(column)
-    const _columnIndex = $xetable.getVTColumnIndex(column)
-    const params = { $table: $xetable, $grid: $xetable.xegrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter }
+    const columnIndex = $xeTable.getColumnIndex(column)
+    const _columnIndex = $xeTable.getVTColumnIndex(column)
+    const params = { $table: $xeTable, $grid: $xeGrid, $rowIndex, column, columnIndex, $columnIndex, _columnIndex, fixed: fixedType, type: cellType, isHidden: fixedHiddenColumn, hasFilter }
+    const thAttrs: Record<string, string | number | null> = {
+      colid,
+      colspan: column.colSpan > 1 ? column.colSpan : null,
+      rowspan: column.rowSpan > 1 ? column.rowSpan : null
+    }
+    const thOns: any = {
+      click: (evnt: MouseEvent) => $xeTable.triggerHeaderCellClickEvent(evnt, params),
+      dblclick: (evnt: MouseEvent) => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+    }
     // 虚拟滚动不支持动态高度
     if (scrollXLoad && !hasEllipsis) {
       showEllipsis = hasEllipsis = true
     }
-    if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
-      thOns.click = (evnt: any) => $xetable.triggerHeaderCellClickEvent(evnt, params)
-    }
-    if (tableListeners['header-cell-dblclick']) {
-      thOns.dblclick = (evnt: any) => $xetable.triggerHeaderCellDblclickEvent(evnt, params)
+    const isColDragCell = columnOpts.drag && columnDragOpts.trigger === 'cell'
+    let isDisabledDrag = false
+    if (isColDragCell) {
+      isDisabledDrag = !!(dragDisabledMethod && dragDisabledMethod(params))
     }
     // 按下事件处理
-    if (mouseConfig) {
-      thOns.mousedown = (evnt: any) => $xetable.triggerHeaderCellMousedownEvent(evnt, params)
+    if (mouseConfig || isColDragCell) {
+      thOns.mousedown = (evnt: any) => $xeTable.triggerHeaderCellMousedownEvent(evnt, params)
     }
-    // 拖拽行事件
+    // 拖拽列事件
     if (columnOpts.drag) {
-      thOns.dragstart = $xetable.handleHeaderCellDragDragstartEvent
-      thOns.dragend = $xetable.handleHeaderCellDragDragendEvent
-      thOns.dragover = $xetable.handleHeaderCellDragDragoverEvent
+      thOns.dragstart = $xeTable.handleHeaderCellDragDragstartEvent
+      thOns.dragend = $xeTable.handleHeaderCellDragDragendEvent
+      thOns.dragover = $xeTable.handleHeaderCellDragDragoverEvent
+      if (isColDragCell) {
+        thOns.mouseup = $xeTable.handleHeaderCellDragMouseupEvent
+      }
     }
     return h('th', {
       class: ['vxe-header--column', colid, {
@@ -66,13 +81,10 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
         'is--sortable': column.sortable,
         'col--filter': !!column.filters,
         'is--filter-active': hasFilter,
+        'is--drag-disabled': isDisabledDrag,
         'col--current': currentColumn === column
       }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
-      attrs: {
-        colid,
-        colspan: column.colSpan > 1 ? column.colSpan : null,
-        rowspan: column.rowSpan > 1 ? column.rowSpan : null
-      },
+      attrs: thAttrs,
       style: headerCellStyle ? (XEUtils.isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle) : null,
       on: thOns,
       key: columnKey || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex

package/packages/table/src/methods.ts

@@ -815,16 +815,13 @@ const Methods = {
    * @param {Array} datas 数据
    */
   loadData (datas: any) {
-    const { inited, initStatus } = this
+    const { initStatus } = this
     return this.loadTableData(datas).then(() => {
       this.inited = true
       this.initStatus = true
       if (!initStatus) {
         this.handleLoadDefaults()
       }
-      if (!inited) {
-        this.handleInitDefaults()
-      }
       return this.recalculate()
     })
   },
@@ -833,7 +830,6 @@ const Methods = {
    * @param {Array} datas 数据
    */
   reloadData (datas: any) {
-    const { inited } = this
     return this.clearAll()
       .then(() => {
         this.inited = true
@@ -842,9 +838,6 @@ const Methods = {
       })
       .then(() => {
         this.handleLoadDefaults()
-        if (!inited) {
-          this.handleInitDefaults()
-        }
         return this.recalculate()
       })
   },
@@ -4020,23 +4013,74 @@ const Methods = {
    * @param {Array/Row} rows 行数据
    * @param {Boolean} value 是否选中
    */
-  setCheckboxRow (rows: any, value: any) {
+  setCheckboxRow (rows: any, checked: any) {
+    const $xeTable = this
+
     if (rows && !XEUtils.isArray(rows)) {
       rows = [rows]
     }
-    return this.handleCheckedCheckboxRow(rows, value, true)
+    return $xeTable.handleCheckedCheckboxRow(rows, checked, true)
+  },
+  setCheckboxRowKey (keys: any, checked: boolean) {
+    const $xeTable = this
+    const internalData = $xeTable
+
+    const { fullAllDataRowIdData } = internalData
+    if (keys && !XEUtils.isArray(keys)) {
+      keys = [keys]
+    }
+    const rows: any = []
+    keys.forEach((rowid: string) => {
+      const rowRest = fullAllDataRowIdData[rowid]
+      if (rowRest) {
+        rows.push(rowRest.row)
+      }
+    })
+    return $xeTable.handleCheckedCheckboxRow(rows, checked, true)
   },
   isCheckedByCheckboxRow (row: any) {
-    const { selectCheckboxMaps } = this
-    const { checkField } = this.checkboxOpts
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const { selectCheckboxMaps } = reactData
+    const checkboxOpts = $xeTable.computeCheckboxOpts
+    const { checkField } = checkboxOpts
     if (checkField) {
       return XEUtils.get(row, checkField)
     }
-    return !!selectCheckboxMaps[getRowid(this, row)]
+    return !!selectCheckboxMaps[getRowid($xeTable, row)]
+  },
+  isCheckedByCheckboxRowKey (rowid: string) {
+    const $xeTable = this
+    const reactData = $xeTable
+    const internalData = $xeTable
+
+    const { selectCheckboxMaps } = reactData
+    const { fullAllDataRowIdData } = internalData
+    const checkboxOpts = $xeTable.computeCheckboxOpts
+    const { checkField } = checkboxOpts
+    if (checkField) {
+      const rowRest = fullAllDataRowIdData[rowid]
+      if (rowRest) {
+        return XEUtils.get(rowRest.row, checkField)
+      }
+      return false
+    }
+    return !!selectCheckboxMaps[rowid]
   },
   isIndeterminateByCheckboxRow (row: any) {
-    const { treeIndeterminateMaps } = this
-    return !!treeIndeterminateMaps[getRowid(this, row)] && !this.isCheckedByCheckboxRow(row)
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const { treeIndeterminateMaps } = reactData
+    return !!treeIndeterminateMaps[getRowid($xeTable, row)] && !$xeTable.isCheckedByCheckboxRow(row)
+  },
+  isIndeterminateByCheckboxRowKey (rowid: string) {
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const { treeIndeterminateMaps } = reactData
+    return !!treeIndeterminateMaps[rowid] && !$xeTable.isCheckedByCheckboxRowKey(rowid)
   },
   /**
    * 切换选中
@@ -4762,7 +4806,24 @@ const Methods = {
     return this.$nextTick()
   },
   isCheckedByRadioRow (row: any) {
-    return this.selectRadioRow === row
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const { selectRadioRow } = reactData
+    if (row && selectRadioRow) {
+      return $xeTable.eqRow(selectRadioRow, row)
+    }
+    return false
+  },
+  isCheckedByRadioRowKey (key: string) {
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const { selectRadioRow } = reactData
+    if (selectRadioRow) {
+      return key === getRowid($xeTable, selectRadioRow)
+    }
+    return false
   },
   handleCheckedRadioRow (row: any, isForce: any) {
     const { radioOpts } = this
@@ -4778,7 +4839,24 @@ const Methods = {
    * @param {Row} row 行对象
    */
   setRadioRow (row: any) {
-    return this.handleCheckedRadioRow(row, true)
+    const $xeTable = this
+
+    return $xeTable.handleCheckedRadioRow(row, true)
+  },
+  /**
+   * 用于单选行，设置某一行为选中状态
+   * @param key 行主键
+   */
+  setRadioRowKey (rowid: any) {
+    const $xeTable = this
+    const internalData = $xeTable
+
+    const { fullAllDataRowIdData } = internalData
+    const rowRest = fullAllDataRowIdData[rowid]
+    if (rowRest) {
+      return $xeTable.handleCheckedRadioRow(rowRest.row, true)
+    }
+    return $xeTable.$nextTick()
   },
   /**
    * 用于当前行，手动清空当前高亮的状态
@@ -4913,6 +4991,8 @@ const Methods = {
    * 如果是双击模式，则单击后选中状态
    */
   triggerCellClickEvent (evnt: any, params: any) {
+    const $xeTable = this
+
     const { highlightCurrentRow, editStore, radioOpts, expandOpts, treeOpts, keyboardOpts, editConfig, editOpts, checkboxOpts, rowOpts } = this
     const { actived, focused } = editStore
     const { row, column } = params
@@ -4976,6 +5056,20 @@ const Methods = {
         }
       }
     }
+    // 如果是双击编辑模式
+    if (isEnableConf(editConfig) && editOpts.trigger === 'dblclick') {
+      if (actived.row && actived.column) {
+        if (editOpts.mode === 'row') {
+          if (!$xeTable.eqRow(actived.row, row)) {
+            $xeTable.handleClearEdit(evnt)
+          }
+        } else if (editOpts.mode === 'cell') {
+          if (!$xeTable.eqRow(actived.row, row) || actived.column.id !== column.id) {
+            $xeTable.handleClearEdit(evnt)
+          }
+        }
+      }
+    }
     this.emitEvent('cell-click', params, evnt)
   },
   /**
@@ -5062,6 +5156,79 @@ const Methods = {
       $xeTable.handleColumnSortEvent(evnt, column)
     }
   },
+  /**
+   * 表头单元格按下事件
+   */
+  triggerHeaderCellMousedownEvent (evnt: any, params: any) {
+    const $xeTable = this
+    const props = $xeTable
+
+    const { mouseConfig } = props
+    const mouseOpts = $xeTable.computeMouseOpts
+    const columnOpts = $xeTable.computeColumnOpts
+    const columnDragOpts = $xeTable.computeColumnDragOpts
+    const { trigger, disabledMethod } = columnDragOpts
+    const cell = evnt.currentTarget
+    const triggerInput = cell && cell.tagName && cell.tagName.toLowerCase() === 'input'
+    const triggerCheckbox = getEventTargetNode(evnt, cell, 'vxe-cell--checkbox').flag
+    const triggerSort = getEventTargetNode(evnt, cell, 'vxe-cell--sort').flag
+    const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag
+    let triggerDrag = false
+    if (!(triggerInput || triggerCheckbox || triggerSort || triggerFilter)) {
+      if (columnOpts.drag && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
+        triggerDrag = true
+        $xeTable.handleHeaderCellDragMousedownEvent(evnt, params)
+      }
+    }
+    if (!triggerDrag && mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaEvent) {
+      $xeTable.handleHeaderCellAreaEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params))
+    }
+    $xeTable.focus()
+    if ($xeTable.closeMenu) {
+      $xeTable.closeMenu()
+    }
+  },
+  /**
+   * 单元格按下事件
+   */
+  triggerCellMousedownEvent (evnt: any, params: any) {
+    const $xeTable = this
+
+    const { column } = params
+    const { type, treeNode } = column
+    const isRadioType = type === 'radio'
+    const isCheckboxType = type === 'checkbox'
+    const isExpandType = type === 'expand'
+    const rowOpts = $xeTable.computeRowOpts
+    const rowDragOpts = $xeTable.computeRowDragOpts
+    const { trigger, disabledMethod } = rowDragOpts
+    const cell = evnt.currentTarget
+    params.cell = cell
+    const triggerInput = cell && cell.tagName && cell.tagName.toLowerCase() === 'input'
+    const triggerRadio = isRadioType && getEventTargetNode(evnt, cell, 'vxe-cell--radio').flag
+    const triggerCheckbox = isCheckboxType && getEventTargetNode(evnt, cell, 'vxe-cell--checkbox').flag
+    const triggerTreeNode = treeNode && getEventTargetNode(evnt, cell, 'vxe-tree--btn-wrapper').flag
+    const triggerExpandNode = isExpandType && getEventTargetNode(evnt, cell, 'vxe-table--expanded').flag
+    let isColDragCell = false
+    if (rowOpts.drag) {
+      isColDragCell = trigger === 'row' || (column.dragSort && trigger === 'cell')
+    }
+    let triggerDrag = false
+    if (!(triggerInput || triggerRadio || triggerCheckbox || triggerTreeNode || triggerExpandNode)) {
+      if (isColDragCell && !(disabledMethod && disabledMethod(params))) {
+        triggerDrag = true
+        $xeTable.handleCellDragMousedownEvent(evnt, params)
+      }
+    }
+    if (!triggerDrag && $xeTable.handleCellMousedownEvent) {
+      $xeTable.handleCellMousedownEvent(evnt, params)
+    }
+    $xeTable.focus()
+    $xeTable.closeFilter()
+    if ($xeTable.closeMenu) {
+      $xeTable.closeMenu()
+    }
+  },
   /**
    * 行拖拽
    */
@@ -5301,12 +5468,13 @@ const Methods = {
     const props = $xeTable
     const reactData = $xeTable
 
+    evnt.stopPropagation()
     const { dragConfig } = props
     const rowDragOpts = $xeTable.computeRowDragOpts
-    const { dragStartMethod } = rowDragOpts
+    const { trigger, dragStartMethod } = rowDragOpts
     const { row } = params
     const dragEl = evnt.currentTarget as HTMLElement
-    const tdEl = dragEl.parentElement?.parentElement as HTMLElement
+    const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : dragEl.parentElement?.parentElement as HTMLElement
     const trEl = tdEl.parentElement as HTMLElement
     const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null)
     reactData.isDragRowMove = false
@@ -5558,11 +5726,12 @@ const Methods = {
     const $xeTable = this
     const reactData = $xeTable
 
+    evnt.stopPropagation()
     const columnDragOpts = $xeTable.computeColumnDragOpts
-    const { dragStartMethod } = columnDragOpts
+    const { trigger, dragStartMethod } = columnDragOpts
     const { column } = params
     const dragEl = evnt.currentTarget as HTMLElement
-    const thEl = dragEl.parentElement?.parentElement as HTMLElement
+    const thEl = trigger === 'cell' ? dragEl : dragEl.parentElement?.parentElement as HTMLElement
     reactData.isDragColMove = false
     clearColDropOrigin($xeTable)
     if (dragStartMethod && !dragStartMethod(params)) {
@@ -5590,62 +5759,66 @@ const Methods = {
     reactData.isDragColMove = false
   },
   setPendingRow (rows: any, status: any) {
-    const pendingMaps = { ...this.pendingRowMaps }
-    const pendingList = [...this.pendingRowList]
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const pendingMaps = Object.assign({}, reactData.pendingRowMaps)
     if (rows && !XEUtils.isArray(rows)) {
       rows = [rows]
     }
     if (status) {
       rows.forEach((row: any) => {
-        const rowid = getRowid(this, row)
+        const rowid = getRowid($xeTable, row)
         if (rowid && !pendingMaps[rowid]) {
-          pendingList.push(row)
           pendingMaps[rowid] = row
         }
       })
     } else {
       rows.forEach((row: any) => {
-        const rowid = getRowid(this, row)
+        const rowid = getRowid($xeTable, row)
         if (rowid && pendingMaps[rowid]) {
-          const pendingIndex = this.findRowIndexOf(pendingList, row)
-          if (pendingIndex > -1) {
-            pendingList.splice(pendingIndex, 1)
-          }
           delete pendingMaps[rowid]
         }
       })
     }
-    this.pendingRowMaps = pendingMaps
-    this.pendingRowList = pendingList
-    return this.$nextTick()
+    reactData.pendingRowMaps = pendingMaps
+    return $xeTable.$nextTick()
   },
   togglePendingRow (rows: any) {
-    const pendingMaps = { ...this.pendingRowMaps }
-    const pendingList = [...this.pendingRowList]
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const pendingMaps = Object.assign({}, reactData.pendingRowMaps)
     if (rows && !XEUtils.isArray(rows)) {
       rows = [rows]
     }
     rows.forEach((row: any) => {
-      const rowid = getRowid(this, row)
+      const rowid = getRowid($xeTable, row)
       if (rowid) {
         if (pendingMaps[rowid]) {
-          const pendingIndex = this.findRowIndexOf(pendingList, row)
-          if (pendingIndex > -1) {
-            pendingList.splice(pendingIndex, 1)
-          }
           delete pendingMaps[rowid]
         } else {
-          pendingList.push(row)
           pendingMaps[rowid] = row
         }
       }
     })
-    this.pendingRowMaps = pendingMaps
-    this.pendingRowList = pendingList
-    return this.$nextTick()
+    reactData.pendingRowMaps = pendingMaps
+    return $xeTable.$nextTick()
   },
   getPendingRecords () {
-    return this.pendingRowList.slice(0)
+    const $xeTable = this
+    const reactData = $xeTable
+    const internalData = $xeTable
+
+    const { pendingRowMaps } = reactData
+    const { fullAllDataRowIdData } = internalData
+    const insertRecords: any[] = []
+    XEUtils.each(pendingRowMaps, (row, rowid) => {
+      if (fullAllDataRowIdData[rowid]) {
+        insertRecords.push(row)
+      }
+    })
+    return insertRecords
   },
   hasPendingByRow (row: any) {
     const { pendingRowMaps } = this
@@ -5654,7 +5827,6 @@ const Methods = {
   },
   clearPendingRow () {
     this.pendingRowMaps = {}
-    this.pendingRowList = []
     return this.$nextTick()
   },
   sort (sortConfs: any, sortOrder: any) {
@@ -6545,6 +6717,8 @@ const Methods = {
       }
       internalData.lastScrollTop = scrollTop
     }
+    reactData.isDragColMove = false
+    reactData.isDragRowMove = false
     reactData.lastScrollTime = Date.now()
     const evntParams = {
       scrollTop,

package/packages/table/src/table.ts

@@ -23,7 +23,7 @@ import keyboardMixin from '../module/keyboard/mixin'
 import validatorMixin from '../module/validator/mixin'
 import customMixin from '../module/custom/mixin'
 
-import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
+import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType } from 'vxe-pc-ui'
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
 
@@ -291,8 +291,6 @@ export default {
       reColumnFlag: 0,
       // 已标记的对象集
       pendingRowMaps: {},
-      // 已标记的行
-      pendingRowList: [],
       // 自定义列相关的信息
       customStore: {
         btnEl: null,
@@ -777,6 +775,18 @@ export default {
         y: overflowY && scrollYLoad
       }
     },
+    computeTableStyle () {
+      const $xeTable = this
+      const reactData = $xeTable
+
+      const { tableData } = reactData
+      const columnOpts = $xeTable.computeColumnOpts
+      const stys: VxeComponentStyleType = {}
+      if (columnOpts.drag) {
+        stys['--vxe-ui-table-drag-column-move-delay'] = `${Math.max(0.06, Math.min(0.3, tableData.length / 800))}s`
+      }
+      return stys
+    },
     tabsResizeFlag () {
       const $xeTable = this
       const $xeTabs = $xeTable.$xeTabs
@@ -786,16 +796,13 @@ export default {
   } as any,
   watch: {
     data (value: any) {
-      const { inited, initStatus } = this
+      const { initStatus } = this
       this.loadTableData(value).then(() => {
         this.inited = true
         this.initStatus = true
         if (!initStatus) {
           this.handleLoadDefaults()
         }
-        if (!inited) {
-          this.handleInitDefaults()
-        }
         // const checkboxColumn = this.tableFullColumn.find(column => column.type === 'checkbox')
         // if (checkboxColumn && this.tableFullData.length > 300 && !this.checkboxOpts.checkField) {
         //   warnLog('vxe.error.checkProp', ['checkbox-config.checkField'])
@@ -1065,7 +1072,7 @@ export default {
       if (this.editRules && !this._validate) {
         errLog('vxe.error.reqModule', ['Validator'])
       }
-      if ((this.checkboxOpts.range || this.keyboardConfig || this.mouseConfig) && !this.triggerCellMousedownEvent) {
+      if ((this.checkboxOpts.range || this.keyboardConfig || this.mouseConfig) && !this.handleCellMousedownEvent) {
         errLog('vxe.error.reqModule', ['Keyboard'])
       }
       if ((this.printConfig || this.importConfig || this.exportConfig) && !this._exportData) {
@@ -1089,8 +1096,8 @@ export default {
         this.inited = true
         this.initStatus = true
         this.handleLoadDefaults()
-        this.handleInitDefaults()
       }
+      this.handleInitDefaults()
       this.updateStyle()
     })
     globalEvents.on(this, 'paste', this.handleGlobalPasteEvent)
@@ -1245,6 +1252,8 @@ export default {
     const vSize = computeSize
     const virtualScrollBars = $xeTable.computeVirtualScrollBars
     const isArea = mouseConfig && mouseOpts.area
+    const tableStyle = $xeTable.computeTableStyle
+    const columnDragOpts = $xeTable.computeColumnDragOpts
     return h('div', {
       ref: 'refElem',
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
@@ -1260,6 +1269,7 @@ export default {
         'column--highlight': columnOpts.isHover || highlightHoverColumn,
         'checkbox--range': checkboxOpts.range,
         'column--calc': isCalcColumn,
+        'col--drag-cell': columnOpts.drag && columnDragOpts.trigger === 'cell',
         'is--header': showHeader,
         'is--footer': showFooter,
         'is--group': isGroup,
@@ -1277,9 +1287,7 @@ export default {
         'is--virtual-x': scrollXLoad,
         'is--virtual-y': scrollYLoad
       }],
-      style: {
-        '--vxe-ui-table-drag-column-move-delay': `${Math.max(0.05, Math.min(0.3, tableData.length / 800))}s`
-      },
+      style: tableStyle,
       attrs: {
         spellcheck: false
       },