vxe-table 4.12.0-beta.6 → 4.12.0-beta.8

package/packages/table/src/table.ts

@@ -9,7 +9,7 @@ import TableHeaderComponent from './header'
 import TableFooterComponent from './footer'
 import tableProps from './props'
 import tableEmits from './emits'
-import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth } from './util'
+import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, updateDeepRowKey, updateFastRowKey } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 import TableCustomPanelComponent from '../module/custom/panel'
@@ -2367,6 +2367,7 @@ export default defineComponent({
       const childrenField = treeOpts.children || treeOpts.childrenField
       const checkboxOpts = computeCheckboxOpts.value
       const { checkField, reserve, checkMethod } = checkboxOpts
+      // indeterminateField 仅支持读取
       const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField
       const selectRowMaps: Record<string, any> = {}
       /**
@@ -2780,7 +2781,7 @@ export default defineComponent({
       const { transform } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       let treeData = []
-      let fullData = reactive(datas ? datas.slice(0) : []) // 转为响应式
+      let fullData = reactive(datas ? datas.slice(0) : []) // 转为响应式数据
       if (treeConfig) {
         if (transform) {
           // 树结构自动转换
@@ -3589,6 +3590,9 @@ export default defineComponent({
 
     tableMethods = {
       dispatchEvent,
+      getEl () {
+        return refElem.value
+      },
       /**
        * 重置表格的一切数据状态
        */
@@ -4080,18 +4084,20 @@ export default defineComponent({
       },
       /**
        * 检查行或列数据是否发生改变
-       * @param {Row} row 行对象
+       * @param {Row} rowOrId 行对象、行主键
        * @param {String} field 字段名
        */
-      isUpdateByRow (row, field) {
+      isUpdateByRow (rowOrId, field) {
         const { keepSource } = props
         const { tableFullColumn, fullDataRowIdData, sourceDataRowIdData } = internalData
         if (keepSource) {
-          const rowid = getRowid($xeTable, row)
+          const rowid = XEUtils.isString(rowOrId) || XEUtils.isNumber(rowOrId) ? rowOrId : getRowid($xeTable, rowOrId)
+          const rowRest = fullDataRowIdData[rowid]
           // 新增的数据不需要检测
-          if (!fullDataRowIdData[rowid]) {
+          if (!rowRest) {
             return false
           }
+          const row = rowRest.row
           const oRow = sourceDataRowIdData[rowid]
           if (oRow) {
             if (arguments.length > 1) {
@@ -4155,6 +4161,92 @@ export default defineComponent({
           tableColumn: reactData.tableColumn.slice(0)
         }
       },
+      /**
+       * 移动列到指定列的位置
+       * @param fieldOrColumn
+       * @param targetFieldOrColumn
+       * @param options
+       */
+      moveColumnTo (fieldOrColumn, targetFieldOrColumn, options) {
+        const { fullColumnIdData, visibleColumn } = internalData
+        const { dragToChild, dragPos, isCrossDrag } = Object.assign({}, options)
+        const dragCol = handleFieldOrColumn($xeTable, fieldOrColumn)
+        let prevDragCol: VxeTableDefines.ColumnInfo | null = null
+        const colRest = dragCol ? fullColumnIdData[dragCol.id] : null
+        let defPos: 'left' | 'right' = 'left'
+        if (XEUtils.isNumber(targetFieldOrColumn)) {
+          if (colRest && targetFieldOrColumn) {
+            let currList = colRest.items
+            let offsetIndex = colRest._index + targetFieldOrColumn
+            if (isCrossDrag) {
+              currList = visibleColumn
+              offsetIndex = colRest._index + targetFieldOrColumn
+            }
+            if (offsetIndex > 0 && offsetIndex < currList.length - 1) {
+              prevDragCol = currList[offsetIndex]
+            }
+            if (targetFieldOrColumn > 0) {
+              defPos = 'right'
+            }
+          }
+        } else {
+          prevDragCol = handleFieldOrColumn($xeTable, targetFieldOrColumn)
+          const targetColRest = prevDragCol ? fullColumnIdData[prevDragCol.id] : null
+          if (colRest && targetColRest) {
+            if (targetColRest._index > colRest._index) {
+              defPos = 'right'
+            }
+          }
+        }
+        return $xeTable.handleColDragSwapEvent(null, true, dragCol, prevDragCol, dragPos || defPos, dragToChild === true)
+      },
+      /**
+       * 移动行到指定行的位置
+       * @param rowidOrRow
+       * @param targetRowidOrRow
+       * @param options
+       */
+      moveRowTo (rowidOrRow, targetRowidOrRow, options) {
+        const { treeConfig } = props
+        const { fullAllDataRowIdData, afterFullData } = internalData
+        const { dragToChild, dragPos, isCrossDrag } = Object.assign({}, options)
+        const treeOpts = computeTreeOpts.value
+        const dragRow = handleRowidOrRow($xeTable, rowidOrRow)
+        let prevDragRow: any = null
+        let defPos: 'top' | 'bottom' = 'top'
+        const rowRest = dragRow ? fullAllDataRowIdData[getRowid($xeTable, dragRow)] : null
+        if (XEUtils.isNumber(targetRowidOrRow)) {
+          if (rowRest && targetRowidOrRow) {
+            let currList = afterFullData
+            let offsetIndex = rowRest._index + targetRowidOrRow
+            if (treeConfig) {
+              currList = rowRest.items
+              if (treeOpts.transform) {
+                offsetIndex = rowRest.treeIndex + targetRowidOrRow
+                if (isCrossDrag) {
+                  currList = afterFullData
+                  offsetIndex = rowRest._index + targetRowidOrRow
+                }
+              }
+            }
+            if (offsetIndex >= 0 && offsetIndex <= currList.length - 1) {
+              prevDragRow = currList[offsetIndex]
+            }
+            if (targetRowidOrRow > 0) {
+              defPos = 'bottom'
+            }
+          }
+        } else {
+          prevDragRow = handleRowidOrRow($xeTable, targetRowidOrRow)
+          const targetRowRest = prevDragRow ? fullAllDataRowIdData[getRowid($xeTable, prevDragRow)] : null
+          if (rowRest && targetRowRest) {
+            if (targetRowRest._index > rowRest._index) {
+              defPos = 'bottom'
+            }
+          }
+        }
+        return $xeTable.handleRowDragSwapEvent(null, true, dragRow, prevDragRow, dragPos || defPos, dragToChild === true)
+      },
       /**
        * 获取表格的全量列
        */
@@ -4174,6 +4266,7 @@ export default defineComponent({
        */
       getCheckboxRecords (isFull) {
         const { treeConfig } = props
+        const { selectCheckboxMaps } = reactData
         const { tableFullData, afterFullData, afterTreeFullData, tableFullTreeData, fullDataRowIdData, afterFullRowMaps } = internalData
         const treeOpts = computeTreeOpts.value
         const checkboxOpts = computeCheckboxOpts.value
@@ -4181,15 +4274,15 @@ export default defineComponent({
         const { checkField } = checkboxOpts
         const childrenField = treeOpts.children || treeOpts.childrenField
         let rowList: any[] = []
-        const currTableData = isFull ? (transform ? tableFullTreeData : tableFullData) : (transform ? afterTreeFullData : afterFullData)
         if (checkField) {
           if (treeConfig) {
+            const currTableData = isFull ? (transform ? tableFullTreeData : tableFullData) : (transform ? afterTreeFullData : afterFullData)
             rowList = XEUtils.filterTree(currTableData, row => XEUtils.get(row, checkField), { children: transform ? mapChildrenField : childrenField })
           } else {
+            const currTableData = isFull ? tableFullData : afterFullData
             rowList = currTableData.filter((row) => XEUtils.get(row, checkField))
           }
         } else {
-          const { selectCheckboxMaps } = reactData
           XEUtils.each(selectCheckboxMaps, (row, rowid) => {
             if (isFull) {
               if (fullDataRowIdData[rowid]) {
@@ -4873,6 +4966,7 @@ export default defineComponent({
         const childrenField = treeOpts.children || treeOpts.childrenField
         const checkboxOpts = computeCheckboxOpts.value
         const { checkField, reserve } = checkboxOpts
+        // indeterminateField 仅支持读取
         const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField
         if (checkField) {
           const handleClearChecked = (item: any) => {
@@ -6865,32 +6959,20 @@ export default defineComponent({
         const treeOpts = computeTreeOpts.value
         const childrenField = treeOpts.children || treeOpts.childrenField
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField
+        const { lazy } = treeOpts
         const rowkey = getRowkey($xeTable)
+        const isDeepKey = rowkey.indexOf('.') > -1
         const fullAllDataRowIdMaps: Record<string, VxeTableDefines.RowCacheItem> = { ...fullAllDataRowIdData } // 存在已删除数据
         const fullDataRowIdMaps: Record<string, VxeTableDefines.RowCacheItem> = {}
         const treeTempExpandedMaps = { ...treeExpandedMaps }
-        const handleRow = (row: any, index: number, items: any, path?: any[], parentRow?: any, nodes?: any[]) => {
-          let rowid = getRowid($xeTable, row)
-          const seq = treeConfig && path ? toTreePathSeq(path) : index + 1
-          const level = nodes ? nodes.length - 1 : 0
-          if (eqEmptyValue(rowid)) {
-            rowid = getRowUniqueId()
-            XEUtils.set(row, rowkey, rowid)
-          }
-          if (treeConfig && treeOpts.lazy) {
-            const treeExpRest = treeExpandedMaps[rowid]
-            if (row[hasChildField] && XEUtils.isUndefined(row[childrenField])) {
-              row[childrenField] = null
-            }
-            if (treeExpRest) {
-              if (!row[childrenField] || !row[childrenField].length) {
-                delete treeTempExpandedMaps[rowid]
-              }
-            }
-          }
-          let rowRest = fullAllDataRowIdData[rowid]
+
+        const handleRowId = isDeepKey ? updateDeepRowKey : updateFastRowKey
+        const handleRowCache = (row: any, index: number, items: any, currIndex: number, parentRow: any, rowid: string, level: number, seq: string | number) => {
+          let rowRest = fullAllDataRowIdMaps[rowid]
           if (!rowRest) {
             rowRest = { row, rowid, seq, index: -1, _index: -1, $index: -1, treeIndex: index, items, parent: parentRow, level, height: 0, resizeHeight: 0, oTop: 0, expandHeight: 0 }
+            fullDataRowIdMaps[rowid] = rowRest
+            fullAllDataRowIdMaps[rowid] = rowRest
           }
           rowRest.treeLoaded = false
           rowRest.expandLoaded = false
@@ -6899,15 +6981,32 @@ export default defineComponent({
           rowRest.items = items
           rowRest.parent = parentRow
           rowRest.level = level
-          rowRest.index = treeConfig && parentRow ? -1 : index
-          fullDataRowIdMaps[rowid] = rowRest
-          fullAllDataRowIdMaps[rowid] = rowRest
+          rowRest.index = currIndex
+          rowRest.treeIndex = index
         }
+
         if (treeConfig) {
-          XEUtils.eachTree(tableFullTreeData, handleRow, { children: childrenField })
+          XEUtils.eachTree(tableFullTreeData, (row, index, items, path, parentRow, nodes) => {
+            const rowid = handleRowId(row, rowkey)
+            if (treeConfig && lazy) {
+              const treeExpRest = treeTempExpandedMaps[rowid]
+              if (row[hasChildField] && row[childrenField] === undefined) {
+                row[childrenField] = null
+              }
+              if (treeExpRest) {
+                if (!row[childrenField] || !row[childrenField].length) {
+                  delete treeTempExpandedMaps[rowid]
+                }
+              }
+            }
+            handleRowCache(row, index, items, parentRow ? -1 : index, parentRow, rowid, nodes.length - 1, toTreePathSeq(path))
+          }, { children: childrenField })
         } else {
-          tableFullData.forEach(handleRow)
+          tableFullData.forEach((row, index, items) => {
+            handleRowCache(row, index, items, index, null, handleRowId(row, rowkey), 0, index + 1)
+          })
         }
+
         internalData.fullDataRowIdData = fullDataRowIdMaps
         internalData.fullAllDataRowIdData = fullAllDataRowIdMaps
         reactData.treeExpandedMaps = treeTempExpandedMaps
@@ -7556,6 +7655,7 @@ export default defineComponent({
         const childrenField = treeOpts.children || treeOpts.childrenField
         const checkboxOpts = computeCheckboxOpts.value
         const { checkField, checkStrictly, checkMethod } = checkboxOpts
+        // indeterminateField 仅支持读取
         const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField
         if (checkField) {
           // 树结构
@@ -8193,6 +8293,9 @@ export default defineComponent({
         const { afterFullData, tableFullData } = internalData
         const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null)
         const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0
+        const errRest = {
+          status: false
+        }
         if (prevDragRow && dragRow) {
           // 判断是否有拖动
           if (prevDragRow !== dragRow) {
@@ -8207,7 +8310,7 @@ export default defineComponent({
             const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild
             return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then((status) => {
               if (!status) {
-                return
+                return errRest
               }
 
               let oafIndex = -1
@@ -8238,11 +8341,11 @@ export default defineComponent({
                       if (isPeerDrag && !isCrossDrag) {
                         if (oldRest.row[parentField] !== newRest.row[parentField]) {
                           // 非同级
-                          return
+                          return errRest
                         }
                       } else {
                         if (!isCrossDrag) {
-                          return
+                          return errRest
                         }
                         if (oldAllMaps[newRowid]) {
                           isSelfToChildStatus = true
@@ -8253,7 +8356,7 @@ export default defineComponent({
                                 content: getI18n('vxe.error.treeDragChild')
                               })
                             }
-                            return
+                            return errRest
                           }
                         }
                       }
@@ -8261,13 +8364,13 @@ export default defineComponent({
                       // 子到根
 
                       if (!isCrossDrag) {
-                        return
+                        return errRest
                       }
                     } else if (newLevel) {
                       // 根到子
 
                       if (!isCrossDrag) {
-                        return
+                        return errRest
                       }
                       if (oldAllMaps[newRowid]) {
                         isSelfToChildStatus = true
@@ -8278,7 +8381,7 @@ export default defineComponent({
                               content: getI18n('vxe.error.treeDragChild')
                             })
                           }
-                          return
+                          return errRest
                         }
                       }
                     } else {
@@ -8342,28 +8445,36 @@ export default defineComponent({
               if (reactData.scrollYLoad) {
                 $xeTable.updateScrollYSpace()
               }
-              nextTick().then(() => {
+
+              if (evnt) {
+                dispatchEvent('row-dragend', {
+                  oldRow: dragRow,
+                  newRow: prevDragRow,
+                  dragRow,
+                  dragPos: prevDragPos as any,
+                  dragToChild: isDragToChildFlag,
+                  offsetIndex: dragOffsetIndex,
+                  _index: {
+                    newIndex: nafIndex,
+                    oldIndex: oafIndex
+                  }
+                }, evnt)
+              }
+
+              return nextTick().then(() => {
                 $xeTable.updateCellAreas()
                 $xeTable.recalculate()
-              })
-
-              dispatchEvent('row-dragend', {
-                oldRow: dragRow,
-                newRow: prevDragRow,
-                dragRow,
-                dragPos: prevDragPos as any,
-                dragToChild: isDragToChildFlag,
-                offsetIndex: dragOffsetIndex,
-                _index: {
-                  newIndex: nafIndex,
-                  oldIndex: oafIndex
+              }).then(() => {
+                return {
+                  status: true
                 }
-              }, evnt)
+              })
             }).catch(() => {
+              return errRest
             })
           }
         }
-        return Promise.resolve()
+        return Promise.resolve(errRest)
       },
       handleRowDragDragendEvent (evnt) {
         const { treeConfig } = props
@@ -8488,6 +8599,9 @@ export default defineComponent({
         const { isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod, dragToChildMethod } = columnDragOpts
         const { collectColumn } = internalData
         const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0
+        const errRest = {
+          status: false
+        }
         if (prevDragCol && dragCol) {
           // 判断是否有拖动
           if (prevDragCol !== dragCol) {
@@ -8504,7 +8618,7 @@ export default defineComponent({
             const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild
             return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
               if (!status) {
-                return
+                return errRest
               }
 
               let oafIndex = -1
@@ -8523,11 +8637,11 @@ export default defineComponent({
                 if (isPeerDrag && !isCrossDrag) {
                   if (dragColumn.parentId !== newColumn.parentId) {
                     // 非同级
-                    return
+                    return errRest
                   }
                 } else {
                   if (!isCrossDrag) {
-                    return
+                    return errRest
                   }
 
                   if (oldAllMaps[newColumn.id]) {
@@ -8539,7 +8653,7 @@ export default defineComponent({
                           content: getI18n('vxe.error.treeDragChild')
                         })
                       }
-                      return
+                      return errRest
                     }
                   }
                 }
@@ -8547,13 +8661,13 @@ export default defineComponent({
                 // 子到根
 
                 if (!isCrossDrag) {
-                  return
+                  return errRest
                 }
               } else if (newColumn.parentId) {
                 // 根到子
 
                 if (!isCrossDrag) {
-                  return
+                  return errRest
                 }
                 if (oldAllMaps[newColumn.id]) {
                   isSelfToChildStatus = true
@@ -8564,7 +8678,7 @@ export default defineComponent({
                         content: getI18n('vxe.error.treeDragChild')
                       })
                     }
-                    return
+                    return errRest
                   }
                 }
               } else {
@@ -8628,27 +8742,34 @@ export default defineComponent({
                 }
               }
 
-              dispatchEvent('column-dragend', {
-                oldColumn: dragColumn,
-                newColumn,
-                dragColumn,
-                dragPos: prevDragPos,
-                dragToChild: isDragToChildFlag,
-                offsetIndex: dragOffsetIndex,
-                _index: {
-                  newIndex: nafIndex,
-                  oldIndex: oafIndex
-                }
-              }, evnt)
+              if (evnt) {
+                dispatchEvent('column-dragend', {
+                  oldColumn: dragColumn,
+                  newColumn,
+                  dragColumn,
+                  dragPos: prevDragPos,
+                  dragToChild: isDragToChildFlag,
+                  offsetIndex: dragOffsetIndex,
+                  _index: {
+                    newIndex: nafIndex,
+                    oldIndex: oafIndex
+                  }
+                }, evnt)
+              }
 
               if (isSyncColumn) {
                 $xeTable.handleColDragSwapColumn()
               }
+
+              return {
+                status: true
+              }
             }).catch(() => {
+              return errRest
             })
           }
         }
-        return Promise.resolve()
+        return Promise.resolve(errRest)
       },
       handleHeaderCellDragDragendEvent (evnt) {
         const { dragCol } = reactData

package/packages/table/src/util.ts

@@ -2,6 +2,7 @@ import { watch, reactive } from 'vue'
 import XEUtils from 'xe-utils'
 import { ColumnInfo } from './columnInfo'
 import { isPx, isScale } from '../../ui/src/dom'
+import { eqEmptyValue } from '../../ui/src/utils'
 
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTableDefines } from '../../../types'
 
@@ -101,15 +102,37 @@ export function getRowUniqueId () {
 export function getRowkey ($xeTable: VxeTableConstructor) {
   const { props } = $xeTable
   const { computeRowOpts } = $xeTable.getComputeMaps()
-  const { rowId } = props
   const rowOpts = computeRowOpts.value
-  return rowId || rowOpts.keyField || '_X_ROW_KEY'
+  return `${props.rowId || rowOpts.keyField || '_X_ROW_KEY'}`
 }
 
 // 行主键 value
 export function getRowid ($xeTable: VxeTableConstructor, row: any) {
   const rowid = XEUtils.get(row, getRowkey($xeTable))
-  return XEUtils.eqNull(rowid) ? '' : encodeURIComponent(rowid)
+  return encodeRowid(rowid)
+}
+
+// 编码行主键
+export function encodeRowid (rowVal: string) {
+  return XEUtils.eqNull(rowVal) ? '' : encodeURIComponent(rowVal)
+}
+
+export function updateDeepRowKey (row: any, rowkey: string) {
+  let rowid = XEUtils.get(row, rowkey)
+  if (eqEmptyValue(rowid)) {
+    rowid = getRowUniqueId()
+    XEUtils.set(row, rowkey, rowid)
+  }
+  return rowid
+}
+
+export function updateFastRowKey (row: any, rowkey: string) {
+  let rowid = row[rowkey]
+  if (eqEmptyValue(rowid)) {
+    rowid = getRowUniqueId()
+    row[rowkey] = rowid
+  }
+  return rowid
 }
 
 export interface XEColumnInstance {
@@ -123,6 +146,14 @@ export const handleFieldOrColumn = ($xeTable: VxeTableConstructor, fieldOrColumn
   return null
 }
 
+export const handleRowidOrRow = ($xeTable: VxeTableConstructor, rowidOrRow: any) => {
+  if (rowidOrRow) {
+    const rowid = XEUtils.isString(rowidOrRow) || XEUtils.isNumber(rowidOrRow) ? rowidOrRow : getRowid($xeTable, rowidOrRow)
+    return $xeTable.getRowById(rowid)
+  }
+  return null
+}
+
 function getPaddingLeftRightSize (elem: HTMLElement | null) {
   if (elem) {
     const computedStyle = getComputedStyle(elem)