vxe-table 3.10.6 → 3.10.8

package/packages/table/src/methods.ts

@@ -339,6 +339,17 @@ function clearRowDropOrigin ($xeTable: any) {
   }
 }
 
+function updateRowDropOrigin ($xeTable: any, row: any) {
+  const el = $xeTable.$el
+  if (el) {
+    const clss = 'row--drag-origin'
+    const rowid = getRowid($xeTable, row)
+    XEUtils.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), (elem) => {
+      addClass(elem, clss)
+    })
+  }
+}
+
 function clearRowDropTarget ($xeTable: any) {
   const el = $xeTable.$el
   if (el) {
@@ -349,6 +360,18 @@ function clearRowDropTarget ($xeTable: any) {
   }
 }
 
+function updateRowDropTarget ($xeTable: any, row: any, dragPos: string) {
+  const el = $xeTable.$el
+  if (el) {
+    const clss = 'row--drag-active-target'
+    const rowid = getRowid($xeTable, row)
+    XEUtils.arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), (elem: any) => {
+      addClass(elem, clss)
+      elem.setAttribute('drag-pos', dragPos)
+    })
+  }
+}
+
 function showRowDropTip (evnt: DragEvent | MouseEvent, $xeTable: any) {
   const rdTipEl = $xeTable.$refs.refRowDragTipElem as HTMLDivElement
   if (!rdTipEl) {
@@ -376,7 +399,18 @@ const hideRowDropTip = ($xeTable: any) => {
 const updateRowDropTipContent = ($xeTable: any, tdEl: HTMLElement) => {
   const reactData = $xeTable
 
-  reactData.dragTipText = tdEl.textContent || ''
+  const { dragRow } = reactData
+  const dragOpts = $xeTable.computeDragOpts
+  const { rowTooltipMethod } = dragOpts
+  let tipContent = ''
+  if (rowTooltipMethod) {
+    tipContent = `${rowTooltipMethod({
+      row: dragRow
+    }) || ''}`
+  } else {
+    tipContent = getI18n('vxe.table.dragTip', [tdEl.textContent || ''])
+  }
+  reactData.dragTipText = tipContent
 }
 
 const Methods = {
@@ -4577,7 +4611,7 @@ const Methods = {
     const treeOpts = $xeTable.computeTreeOpts
     const { transform } = treeOpts
     const { dragRow } = reactData
-    const { afterFullData, tableFullData, prevDragRow, prevDragPos } = internalData
+    const { afterFullData, afterTreeFullData, tableFullData, tableFullTreeData, prevDragRow, prevDragPos } = internalData
     if (prevDragRow && dragRow) {
       // 判断是否有拖动
       if (prevDragRow !== dragRow) {
@@ -4594,18 +4628,36 @@ const Methods = {
           }
           const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0
 
-          // 移出源位置
-          const oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow)
-          const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow)
-          afterFullData.splice(oafIndex, 1)
-          tableFullData.splice(otfIndex, 1)
-          // 插新位置
-          const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow)
-          const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow)
-          const nafIndex = pafIndex + dragOffsetIndex
-          const ntfIndex = ptfIndex + dragOffsetIndex
-          afterFullData.splice(nafIndex, 0, dragRow)
-          tableFullData.splice(ntfIndex, 0, dragRow)
+          let oafIndex = -1
+          let nafIndex = -1
+          if (treeConfig) {
+            // 移出源位置
+            oafIndex = $xeTable.findRowIndexOf(afterTreeFullData, dragRow)
+            const otfIndex = $xeTable.findRowIndexOf(tableFullTreeData, dragRow)
+            afterTreeFullData.splice(oafIndex, 1)
+            tableFullTreeData.splice(otfIndex, 1)
+
+            // 插新位置
+            const pafIndex = $xeTable.findRowIndexOf(afterTreeFullData, prevDragRow)
+            const ptfIndex = $xeTable.findRowIndexOf(tableFullTreeData, prevDragRow)
+            nafIndex = pafIndex + dragOffsetIndex
+            const ntfIndex = ptfIndex + dragOffsetIndex
+            afterTreeFullData.splice(nafIndex, 0, dragRow)
+            tableFullTreeData.splice(ntfIndex, 0, dragRow)
+          } else {
+            // 移出源位置
+            oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow)
+            const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow)
+            afterFullData.splice(oafIndex, 1)
+            tableFullData.splice(otfIndex, 1)
+            // 插新位置
+            const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow)
+            const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow)
+            nafIndex = pafIndex + dragOffsetIndex
+            const ntfIndex = ptfIndex + dragOffsetIndex
+            afterFullData.splice(nafIndex, 0, dragRow)
+            tableFullData.splice(ntfIndex, 0, dragRow)
+          }
 
           reactData.isDragRowMove = true
           $xeTable.cacheRowMap()
@@ -4659,8 +4711,7 @@ const Methods = {
       const { dragRow } = reactData
       const offsetY = evnt.clientY - trEl.getBoundingClientRect().y
       const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom'
-      addClass(trEl, 'row--drag-active-target')
-      trEl.setAttribute('drag-pos', dragPos)
+      updateRowDropTarget($xeTable, row, dragPos)
       internalData.prevDragRow = row
       internalData.prevDragPos = dragPos
       $xeTable.dispatchEvent('row-dragover', {
@@ -4692,7 +4743,7 @@ const Methods = {
     }
     reactData.dragRow = row
     trEl.draggable = true
-    addClass(trEl, 'row--drag-origin')
+    updateRowDropOrigin($xeTable, row)
     showRowDropTip(evnt, $xeTable)
     updateRowDropTipContent($xeTable, tdEl)
     $xeTable.dispatchEvent('row-dragstart', params, evnt)

package/packages/table/src/table.ts

@@ -1044,6 +1044,7 @@ export default {
     const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
 
     const $xeTable = this
+    const reactData = $xeTable
 
     const {
       _e,
@@ -1089,10 +1090,14 @@ export default {
       loadingOpts,
       editRules
     } = $xeTable
+    const { dragRow, dragTipText } = reactData
     const { leftList, rightList } = columnStore
     const currLoading = this._isLoading || loading
     const vSize = computeSize
+    const dragOpts = $xeTable.computeDragOpts
     const virtualScrollBars = $xeTable.computeVirtualScrollBars
+    const dragSlots = dragOpts.slots || {}
+    const rowTipSlot = dragSlots.rowTip
     return h('div', {
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
@@ -1339,11 +1344,13 @@ export default {
       /**
          * 拖拽提示
          */
-      rowOpts.drag
+      rowOpts.drag && (dragRow || dragTipText)
         ? h('div', {
           ref: 'refRowDragTipElem',
-          class: 'vxe-table--row-drag-hint'
-        }, getI18n('vxe.table.dragTip', [this.dragTipText]))
+          class: 'vxe-table--row-drag-tip'
+        }, rowTipSlot
+          ? (dragRow ? this.callSlot(rowTipSlot, { row: dragRow }, h) : [renderEmptyElement($xeTable)])
+          : (dragTipText ? [h('span', dragTipText)] : [renderEmptyElement($xeTable)]))
         : _e(),
       h('div', {}, [
         /**

package/packages/ui/index.ts

@@ -58,7 +58,8 @@ VxeUI.setConfig({
       autoClear: true,
       autoPos: true,
       message: 'inline',
-      msgMode: 'single'
+      msgMode: 'single',
+      theme: 'normal'
     },
     columnConfig: {
       maxFixedSize: 4

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

@@ -292,7 +292,8 @@
     text-align: center;
   }
   &.col--resizable {
-    & > .vxe-input {
+    & > .vxe-input,
+    & > .vxe-number-input {
       width: 100%;
     }
   }

package/styles/components/table.scss

@@ -1299,7 +1299,7 @@
   .vxe-body--row-list-move {
     transition: transform 0.35s;
   }
-  .vxe-table--row-drag-hint {
+  .vxe-table--row-drag-tip {
     display: none;
     position: absolute;
     top: 0;
@@ -1427,30 +1427,40 @@
 
   /*校验不通过*/
   .vxe-body--column {
+    .vxe-cell--valid-error-tip {
+      width: 100%;
+      position: absolute;
+      left: 50%;
+      font-size: 12px;
+      line-height: 1.2em;
+      transform: translateX(-50%);
+      text-align: left;
+      z-index: 4;
+      padding-left: var(--vxe-ui-table-cell-padding-left);
+      padding-right: var(--vxe-ui-table-cell-padding-right);
+    }
+    .vxe-cell--valid-error-wrapper {
+      display: inline-block;
+      border-radius: var(--vxe-ui-border-radius);
+      pointer-events: auto;
+    }
+    .vxe-cell--valid-error-theme-beautify {
+      padding: 0.4em 0.8em;
+      color: #fff;
+      background-color: #f56c6c;
+      .vxe-cell--valid-error-msg {
+        background: transparent;
+      }
+    }
+    .vxe-cell--valid-error-theme-normal {
+      color: var(--vxe-ui-table-validate-error-color);
+      background-color: var(--vxe-ui-table-validate-error-background-color);
+    }
     &.col--active,
     &.col--selected {
       position: relative;
     }
     &.col--valid-error {
-      .vxe-cell--valid-error-hint {
-        width: 100%;
-        position: absolute;
-        left: 50%;
-        font-size: 12px;
-        line-height: 1.2em;
-        transform: translateX(-50%);
-        text-align: left;
-        z-index: 4;
-        padding-left: var(--vxe-ui-table-cell-padding-left);
-        padding-right: var(--vxe-ui-table-cell-padding-right);
-        .vxe-cell--valid-error-msg {
-          display: inline-block;
-          border-radius: var(--vxe-ui-border-radius);
-          color: var(--vxe-ui-table-validate-error-color);
-          background-color: var(--vxe-ui-table-validate-error-background-color);
-          pointer-events: auto;
-        }
-      }
       .vxe-default-input,
       .vxe-default-textarea,
       .vxe-default-select {
@@ -1465,11 +1475,11 @@
   &.valid-msg--single {
     .vxe-body--row {
       &:last-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           bottom: calc(100%);
         }
         &:first-child {
-          .vxe-cell--valid-error-hint {
+          .vxe-cell--valid-error-tip {
             bottom: auto;
           }
         }
@@ -1479,7 +1489,7 @@
   &.valid-msg--full {
     .vxe-body--row {
       &:last-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           top: calc(100% - 1.3em);
         }
       }
@@ -1489,7 +1499,7 @@
   &.old-cell-valid {
     .vxe-body--column {
       &.col--valid-error {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           width: 320px;
           position: absolute;
           bottom: calc(100% + 4px);
@@ -1511,7 +1521,7 @@
     }
     .vxe-body--row {
       &:first-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           bottom: auto;
           top: calc(100% + 4px);
         }
@@ -1519,7 +1529,7 @@
     }
     .vxe-body--column {
       &:first-child {
-        .vxe-cell--valid-error-hint {
+        .vxe-cell--valid-error-tip {
           left: 10px;
           transform: translateX(0);
           text-align: left;