vxe-table 3.11.38 → 3.12.0-beta.0

package/packages/table/src/body.ts

@@ -428,15 +428,9 @@ function renderRows (h: CreateElement, _vm: any, $xeTable: any, fixedType: any,
     }
     // 拖拽行事件
     if (rowOpts.drag && (!treeConfig || transform)) {
-      trOn.dragstart = (evnt: DragEvent) => {
-        $xeTable.handleRowDragDragstartEvent(evnt)
-      }
-      trOn.dragover = (evnt: DragEvent) => {
-        $xeTable.handleRowDragDragoverEvent(evnt)
-      }
-      trOn.dragend = (evnt: DragEvent) => {
-        $xeTable.handleRowDragDragendEvent(evnt)
-      }
+      trOn.dragstart = $xeTable.handleRowDragDragstartEvent
+      trOn.dragend = $xeTable.handleRowDragDragendEvent
+      trOn.dragover = $xeTable.handleRowDragDragoverEvent
     }
     const trClass = [
       'vxe-body--row',
@@ -579,44 +573,99 @@ export default {
     elemStore[`${prefix}emptyBlock`] = null
   },
   render (this: any, h: CreateElement) {
+    const props = this
     const $xeTable = this.$parent
+    const tableProps = $xeTable
+    const tableReactData = $xeTable
+    const tableInternalData = $xeTable
 
-    const { _e, $parent: $xetable, fixedColumn, fixedType } = this
+    const { tId, $scopedSlots } = $xeTable
+    const { fixedColumn, fixedType, tableColumn } = props
 
+    const { showOverflow: allColumnOverflow, spanMethod, footerSpanMethod, mouseConfig } = tableProps
+    const { tableData, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData
+    const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData
     const rowOpts = $xeTable.computeRowOpts
+    const sYOpts = $xeTable.computeSYOpts
+    const emptyOpts = $xeTable.computeEmptyOpts
+    const mouseOpts = $xeTable.computeMouseOpts
     const rowDragOpts = $xeTable.computeRowDragOpts
-    let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts, isDragRowMove } = $xetable
-    // 如果是使用优化模式
+
+    let renderDataList = tableData
+    let renderColumnList = tableColumn
+
     if (fixedType) {
-      // 如果存在展开行使用全量渲染
-      if (!expandColumn && (scrollXLoad || scrollYLoad || (allColumnOverflow ? isAllOverflow : allColumnOverflow))) {
-        if (!mergeList.length && !spanMethod && !(keyboardConfig && keyboardOpts.isMerge)) {
-          tableColumn = fixedColumn
+      // 如果是使用优化模式
+      if (scrollXLoad || scrollYLoad || (allColumnOverflow && isAllOverflow)) {
+        // 如果不支持优化模式
+        if (expandColumn || spanMethod || footerSpanMethod) {
+          renderColumnList = visibleColumn
         } else {
-          tableColumn = visibleColumn
-          // 检查固定列是否被合并，合并范围是否超出固定列
-          // if (mergeList.length && !isMergeLeftFixedExceeded && fixedType === 'left') {
-          //   tableColumn = fixedColumn
-          // } else if (mergeList.length && !isMergeRightFixedExceeded && fixedType === 'right') {
-          //   tableColumn = fixedColumn
-          // } else {
-          //   tableColumn = visibleColumn
-          // }
+          renderColumnList = fixedColumn || []
         }
       } else {
-        tableColumn = visibleColumn
+        renderColumnList = visibleColumn
       }
     }
+
+    // 行拖拽
+    if (scrollYLoad && dragRow) {
+      if (renderDataList.length > 2) {
+        const dRowRest = fullAllDataRowIdData[getRowid($xeTable, dragRow)]
+        if (dRowRest) {
+          const drIndex = dRowRest._index
+          const firstRow = renderDataList[0]
+          const lastRow = renderDataList[renderDataList.length - 1]
+          const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)]
+          const lastRowRest = fullAllDataRowIdData[getRowid($xeTable, lastRow)]
+          if (firstRowRest && lastRowRest) {
+            const frIndex = firstRowRest._index
+            const lrIndex = lastRowRest._index
+            if (drIndex < frIndex) {
+              renderDataList = [dragRow].concat(renderDataList)
+            } else if (drIndex > lrIndex) {
+              renderDataList = renderDataList.concat([dragRow])
+            }
+          }
+        }
+      }
+    }
+
+    if (!fixedType) {
+      // 列拖拽
+      if (scrollXLoad && dragCol) {
+        if (renderColumnList.length > 2) {
+          const dCowRest = fullColumnIdData[dragCol.id]
+          if (dCowRest) {
+            const dcIndex = dCowRest._index
+            const firstCol = renderColumnList[0]
+            const lastCol = renderColumnList[renderColumnList.length - 1]
+            const firstColRest = fullColumnIdData[firstCol.id]
+            const lastColRest = fullColumnIdData[lastCol.id]
+            if (firstColRest && lastColRest) {
+              const fcIndex = firstColRest._index
+              const lcIndex = lastColRest._index
+              if (dcIndex < fcIndex) {
+                renderColumnList = [dragCol].concat(renderColumnList)
+              } else if (dcIndex > lcIndex) {
+                renderColumnList = renderColumnList.concat([dragCol])
+              }
+            }
+          }
+        }
+      }
+    }
+
     let emptyContent
     if ($scopedSlots.empty) {
-      emptyContent = $scopedSlots.empty.call(this, { $table: $xetable }, h)
+      emptyContent = $scopedSlots.empty.call(this, { $table: $xeTable, $grid: $xeTable.xegrid }, h)
     } else {
       const compConf = emptyOpts.name ? renderer.get(emptyOpts.name) : null
       const rtEmptyView = compConf ? (compConf.renderTableEmpty || compConf.renderTableEmptyView || compConf.renderEmpty) : null
       if (rtEmptyView) {
-        emptyContent = getSlotVNs(rtEmptyView.call(this, h, emptyOpts, { $table: $xetable }))
+        emptyContent = getSlotVNs(rtEmptyView.call(this, h, emptyOpts, { $table: $xeTable }))
       } else {
-        emptyContent = $xetable.emptyText || getI18n('vxe.table.emptyText')
+        emptyContent = tableProps.emptyText || getI18n('vxe.table.emptyText')
       }
     }
 
@@ -636,7 +685,7 @@ export default {
       on: ons
     }, [
       fixedType
-        ? _e()
+        ? renderEmptyElement($xeTable)
         : h('div', {
           class: 'vxe-body--x-space',
           ref: 'xSpace'
@@ -660,7 +709,7 @@ export default {
          */
         h('colgroup', {
           ref: 'colgroup'
-        }, tableColumn.map((column: any, $columnIndex: any) => {
+        }, renderColumnList.map((column: any, $columnIndex: any) => {
           return h('col', {
             attrs: {
               name: column.id
@@ -677,10 +726,10 @@ export default {
               tag: 'tbody',
               name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
             }
-          }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))
+          }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList))
           : h('tbody', {
             ref: 'tbody'
-          }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))
+          }, renderRows(h, this, $xeTable, fixedType, renderDataList, renderColumnList))
       ]),
       h('div', {
         class: 'vxe-table--checkbox-range'
@@ -697,8 +746,8 @@ export default {
                   class: 'vxe-table--cell-main-area-btn',
                   on: {
                     mousedown (evnt: any) {
-                      if ($xetable.triggerCellAreaExtendMousedownEvent) {
-                        $xetable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xetable, fixed: fixedType, type: renderType })
+                      if ($xeTable.triggerCellAreaExtendMousedownEvent) {
+                        $xeTable.triggerCellAreaExtendMousedownEvent(evnt, { $table: $xeTable, fixed: fixedType, type: renderType })
                       }
                     }
                   }

package/packages/table/src/footer.ts

@@ -8,7 +8,7 @@ import type { VxeTableDefines } from '../../../types'
 
 const renderType = 'footer'
 
-const { renderer } = VxeUI
+const { renderer, renderEmptyElement } = VxeUI
 
 function mergeFooterMethod (mergeFooterList: any, _rowIndex: any, _columnIndex: any) {
   for (let mIndex = 0; mIndex < mergeFooterList.length; mIndex++) {
@@ -155,18 +155,19 @@ function renderRows (h: CreateElement, _vm: any, tableColumn: VxeTableDefines.Co
     : [])
 }
 
-function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) {
+function renderHeads (h: CreateElement, _vm: any, renderColumnList: VxeTableDefines.ColumnInfo[]) {
   const $xeTable = _vm.$parent
+  const props = _vm
 
   const columnOpts = $xeTable.computeColumnOpts
   const columnDragOpts = $xeTable.computeColumnDragOpts
 
-  const { $parent: $xetable, fixedType, tableColumn } = _vm
-  const { footerRowClassName, footerRowStyle, isDragColMove } = $xetable
+  const { fixedType, footerTableData } = props
+  const { footerRowClassName, footerRowStyle, isDragColMove } = $xeTable
 
   return footerTableData.map((row: any, $rowIndex: any) => {
     const _rowIndex = $rowIndex
-    const rowParams = { $table: $xetable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
+    const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
 
     if (columnOpts.drag && columnDragOpts.animation) {
       return h('transition-group', {
@@ -180,7 +181,7 @@ function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) {
           ],
           style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
         }
-      }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex))
+      }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
     }
     return h('tr', {
       key: $rowIndex,
@@ -189,7 +190,7 @@ function renderHeads (h: CreateElement, _vm: any, footerTableData: any[]) {
         footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
       ],
       style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
-    }, renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex))
+    }, renderRows(h, _vm, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
   })
 }
 
@@ -223,19 +224,58 @@ export default {
     elemStore[`${prefix}xSpace`] = null
   },
   render (h: CreateElement) {
-    let { _e, $parent: $xetable, fixedType, fixedColumn, tableColumn, footerTableData } = this
-    const { tId, mergeFooterList, footerSpanMethod, scrollXLoad, showFooterOverflow: allColumnFooterOverflow, scrollbarWidth, visibleColumn, expandColumn } = $xetable
+    const props = this
+    const $xeTable = this.$parent
+    const tableProps = $xeTable
+    const tableReactData = $xeTable
+    const tableInternalData = $xeTable
+
+    const { tId } = $xeTable
+    const { fixedType, fixedColumn, tableColumn } = props
+
+    const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps
+    const { visibleColumn, fullColumnIdData } = tableInternalData
+    const { scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData
+
+    let renderColumnList = tableColumn
+
     // 如果是使用优化模式
     if (fixedType) {
-      // 如果存在展开行使用全量渲染
-      if (!expandColumn && (scrollXLoad || allColumnFooterOverflow)) {
-        if (!mergeFooterList.length || !footerSpanMethod) {
-          tableColumn = fixedColumn
+      // 如果是使用优化模式
+      if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
+        // 如果不支持优化模式
+        if (spanMethod || footerSpanMethod) {
+          renderColumnList = visibleColumn
         } else {
-          tableColumn = visibleColumn
+          renderColumnList = fixedColumn || []
         }
       } else {
-        tableColumn = visibleColumn
+        renderColumnList = visibleColumn
+      }
+    }
+
+    if (!fixedType) {
+      // 列拖拽
+      if (scrollXLoad && dragCol) {
+        if (renderColumnList.length > 2) {
+          const dCowRest = fullColumnIdData[dragCol.id]
+          if (dCowRest) {
+            const dcIndex = dCowRest._index
+            const firstCol = renderColumnList[0]
+            const lastCol = renderColumnList[renderColumnList.length - 1]
+            const firstColRest = fullColumnIdData[firstCol.id]
+            const lastColRest = fullColumnIdData[lastCol.id]
+            if (firstColRest && lastColRest) {
+              const fcIndex = firstColRest._index
+              const lcIndex = lastColRest._index
+              if (dcIndex < fcIndex) {
+                renderColumnList = [dragCol].concat(renderColumnList)
+              } else if (dcIndex > lcIndex) {
+                renderColumnList = renderColumnList.concat([dragCol])
+              }
+            }
+          }
+        }
       }
     }
 
@@ -252,7 +292,7 @@ export default {
       on: ons
     }, [
       fixedType
-        ? _e()
+        ? renderEmptyElement($xeTable)
         : h('div', {
           class: 'vxe-body--x-space',
           ref: 'xSpace'
@@ -272,7 +312,7 @@ export default {
          */
         h('colgroup', {
           ref: 'colgroup'
-        }, tableColumn.map((column: any, $columnIndex: any) => {
+        }, renderColumnList.map((column: any, $columnIndex: any) => {
           return h('col', {
             attrs: {
               name: column.id
@@ -293,7 +333,7 @@ export default {
          */
         h('tfoot', {
           ref: 'tfoot'
-        }, renderHeads(h, this, footerTableData))
+        }, renderHeads(h, this, renderColumnList))
       ])
     ])
   },

package/packages/table/src/header.ts

@@ -7,7 +7,7 @@ import { convertHeaderColumnToRows, getColReMinWidth } from './util'
 
 import type { VxeTableDefines } from '../../../types'
 
-const { renderer } = VxeUI
+const { renderer, renderEmptyElement } = VxeUI
 
 const cellType = 'header'
 
@@ -84,6 +84,7 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
         'is--sortable': column.sortable,
         'col--filter': !!column.filters,
         'is--filter-active': hasFilter,
+        'is--drag-active': !column.fixed && !isDisabledDrag,
         'is--drag-disabled': isDisabledDrag,
         'col--current': currentColumn === column
       }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
@@ -209,21 +210,71 @@ export default {
     elemStore[`${prefix}repair`] = null
   },
   render (h: CreateElement) {
-    const { _e, $parent: $xetable, fixedType, headerColumn, tableColumn, fixedColumn } = this
-    const { tId, isGroup, visibleColumn, showHeaderOverflow: allColumnHeaderOverflow, scrollXLoad, scrollbarWidth } = $xetable
-    let headerGroups = headerColumn
-    let renderColumnList = tableColumn
+    const props = this
+    const $xeTable = this.$parent
+    const tableProps = $xeTable
+    const tableReactData = $xeTable
+    const tableInternalData = $xeTable
+
+    const { tId } = $xeTable
+    const { fixedType, fixedColumn, tableColumn } = props
+    const { headerColumn } = this
+
+    const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
+    const { isGroup, scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData
+    const { visibleColumn, fullColumnIdData } = tableInternalData
+
+    let renderHeaderList: VxeTableDefines.ColumnInfo[][] = headerColumn
+    let renderColumnList: VxeTableDefines.ColumnInfo[] = tableColumn
+
     if (isGroup) {
       renderColumnList = visibleColumn
     } else {
-      // 如果是使用优化模式
       if (fixedType) {
-        if (scrollXLoad || allColumnHeaderOverflow) {
-          renderColumnList = fixedColumn
+        // 如果是使用优化模式
+        if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
+          // 如果不支持优化模式
+          if (spanMethod || footerSpanMethod) {
+            renderColumnList = visibleColumn
+          } else {
+            renderColumnList = fixedColumn || []
+          }
+        } else {
+          renderColumnList = visibleColumn
+        }
+      }
+      renderHeaderList = [renderColumnList]
+    }
+
+    if (!fixedType) {
+      // 列拖拽
+      if (scrollXLoad && dragCol) {
+        if (renderColumnList.length > 2) {
+          const dCowRest = fullColumnIdData[dragCol.id]
+          if (dCowRest) {
+            const dcIndex = dCowRest._index
+            const firstCol = renderColumnList[0]
+            const lastCol = renderColumnList[renderColumnList.length - 1]
+            const firstColRest = fullColumnIdData[firstCol.id]
+            const lastColRest = fullColumnIdData[lastCol.id]
+            if (firstColRest && lastColRest) {
+              const fcIndex = firstColRest._index
+              const lcIndex = lastColRest._index
+              console.log(dragCol.id, dcIndex, fcIndex, lcIndex, renderColumnList.length)
+              if (dcIndex < fcIndex) {
+                renderColumnList = [dragCol].concat(renderColumnList)
+                renderHeaderList = [[dragCol].concat(renderHeaderList[0])].concat(renderHeaderList.slice(1))
+              } else if (dcIndex > lcIndex) {
+                renderColumnList = renderColumnList.concat([dragCol])
+                renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1))
+              }
+              console.log(renderColumnList.length)
+            }
+          }
         }
       }
-      headerGroups = [renderColumnList]
     }
+
     return h('div', {
       class: ['vxe-table--header-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
       attrs: {
@@ -231,7 +282,7 @@ export default {
       }
     }, [
       fixedType
-        ? _e()
+        ? renderEmptyElement($xeTable)
         : h('div', {
           class: 'vxe-body--x-space',
           ref: 'xSpace'
@@ -272,7 +323,7 @@ export default {
          */
         h('thead', {
           ref: 'thead'
-        }, renderHeads(h, this, headerGroups))
+        }, renderHeads(h, this, renderHeaderList))
       ]),
       /**
        * 其他