vxe-table 3.10.1 → 3.10.2

package/packages/locale/lang/zh-CN.ts

@@ -71,7 +71,8 @@ export default {
       customClose: '关闭',
       customCancel: '取消',
       customRestore: '恢复默认',
-      maxFixedCol: '最大冻结列的数量不能超过 {0} 个'
+      maxFixedCol: '最大冻结列的数量不能超过 {0} 个',
+      dragTip: '移动：{0}'
     },
     grid: {
       selectOneRecord: '请至少选择一条记录！',
@@ -122,7 +123,7 @@ export default {
       cstmCancel: '取消',
       cstmConfirm: '确定',
       cstmConfirmRestore: '请确认是否恢复成默认列配置？',
-      cstmDragTarget: '移动目标：{0}',
+      cstmDragTarget: '移动：{0}',
       setting: {
         colSort: '排序',
         sortHelpTip: '点击并拖动图标可以调整列的排序',

package/packages/table/module/custom/panel.ts

@@ -901,21 +901,21 @@ export default {
       }
       $xetable.checkCustomStatus()
     },
-    sortMousedownEvent (evnt: any) {
+    sortMousedownEvent (evnt: MouseEvent) {
       const { $xetable } = this
-      const btnEl = evnt.currentTarget
-      const tdEl = btnEl.parentNode
-      const trEl = tdEl.parentNode
+      const btnEl = evnt.currentTarget as HTMLElement
+      const tdEl = btnEl.parentNode as HTMLElement
+      const trEl = tdEl.parentNode as HTMLElement
       const colid = trEl.getAttribute('colid')
       const column = $xetable.getColumnById(colid)
       trEl.draggable = true
       this.dragColumn = column
       addClass(trEl, 'active--drag-origin')
     },
-    sortMouseupEvent  (evnt: any) {
-      const btnEl = evnt.currentTarget
-      const tdEl = btnEl.parentNode
-      const trEl = tdEl.parentNode
+    sortMouseupEvent  (evnt: MouseEvent) {
+      const btnEl = evnt.currentTarget as HTMLElement
+      const tdEl = btnEl.parentNode as HTMLElement
+      const trEl = tdEl.parentNode as HTMLElement
       const dragHintEl = this.$refs.dragHintElemRef
       trEl.draggable = false
       this.dragColumn = null

package/packages/table/module/edit/mixin.ts

@@ -547,9 +547,13 @@ export default {
      * 清除激活的编辑
      */
     _clearEdit (evnt: any) {
-      const { editStore } = this
+      const $xeTable = this
+      const reactData = $xeTable
+
+      const { editStore } = reactData
       const { actived, focused } = editStore
       const { row, column } = actived
+      const validOpts = $xeTable.validOpts
       if (row || column) {
         this._syncActivedCell()
         actived.args = null
@@ -567,9 +571,11 @@ export default {
       }
       focused.row = null
       focused.column = null
-      if (getConfig().cellVaildMode === 'obsolete') {
-        if (this.clearValidate) {
-          return this.clearValidate()
+      if (validOpts.autoClear) {
+        if (validOpts.msgMode !== 'full' || getConfig().cellVaildMode === 'obsolete') {
+          if (this.clearValidate) {
+            return this.clearValidate()
+          }
         }
       }
       return this.$nextTick()

package/packages/table/src/body.ts

@@ -299,7 +299,7 @@ function renderColumn (h: any, _vm: any, $xetable: any, seq: any, rowid: any, fi
       getClass(className, params),
       getClass(allCellClassName, params)
     ],
-    key: columnKey || columnOpts.useKey ? column.id : $columnIndex,
+    key: columnKey || columnOpts.useKey || rowOpts.useKey ? column.id : $columnIndex,
     attrs,
     style: Object.assign({
       height: cellHeight
@@ -308,7 +308,7 @@ function renderColumn (h: any, _vm: any, $xetable: any, seq: any, rowid: any, fi
   }, tdVNs)
 }
 
-function renderRows (h: CreateElement, _vm: any, $xetable: any, fixedType: any, tableData: any, tableColumn: any) {
+function renderRows (h: CreateElement, _vm: any, $xeTable: any, fixedType: any, tableData: any, tableColumn: any) {
   const {
     stripe,
     rowKey,
@@ -332,35 +332,47 @@ function renderRows (h: CreateElement, _vm: any, $xetable: any, fixedType: any,
     rowOpts,
     pendingRowList,
     pendingRowMaps
-  } = $xetable
+  } = $xeTable
   const childrenField = treeOpts.children || treeOpts.childrenField
   const rows: any[] = []
   tableData.forEach((row: any, $rowIndex: any) => {
     const trOn: any = {}
     let rowIndex = $rowIndex
-    const _rowIndex = $xetable.getVTRowIndex(row)
+    const _rowIndex = $xeTable.getVTRowIndex(row)
     // 确保任何情况下 rowIndex 都精准指向真实 data 索引
-    rowIndex = $xetable.getRowIndex(row)
-    // 事件绑定
+    rowIndex = $xeTable.getRowIndex(row)
+    // 当前行事件
     if (rowOpts.isHover || highlightHoverRow) {
       trOn.mouseenter = (evnt: any) => {
-        if (isVMScrollProcess($xetable)) {
+        if (isVMScrollProcess($xeTable)) {
           return
         }
-        $xetable.triggerHoverEvent(evnt, { row, rowIndex })
+        $xeTable.triggerHoverEvent(evnt, { row, rowIndex })
       }
       trOn.mouseleave = () => {
-        if (isVMScrollProcess($xetable)) {
+        if (isVMScrollProcess($xeTable)) {
           return
         }
-        $xetable.clearHoverRow()
+        $xeTable.clearHoverRow()
+      }
+    }
+    // 拖拽行事件
+    if (rowOpts.drag) {
+      trOn.dragstart = (evnt: DragEvent) => {
+        $xeTable.handleRowDragDragstartEvent(evnt)
+      }
+      trOn.dragover = (evnt: DragEvent) => {
+        $xeTable.handleRowDragDragoverEvent(evnt)
+      }
+      trOn.dragend = (evnt: DragEvent) => {
+        $xeTable.handleRowDragDragendEvent(evnt)
       }
     }
-    const rowid = getRowid($xetable, row)
+    const rowid = getRowid($xeTable, row)
     const rest = fullAllDataRowIdData[rowid]
     const rowLevel = rest ? rest.level : 0
     const seq = rest ? rest.seq : -1
-    const params = { $table: $xetable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex }
+    const params = { $table: $xeTable, seq, rowid, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex }
     // 行是否被展开
     const isExpandRow = expandColumn && !!rowExpandedMaps[rowid]
     // 树节点是否被展开
@@ -369,7 +381,7 @@ function renderRows (h: CreateElement, _vm: any, $xetable: any, fixedType: any,
     // 是否新增行
     let isNewRow = false
     if (editConfig) {
-      isNewRow = $xetable.isInsertByRow(row)
+      isNewRow = $xeTable.isInsertByRow(row)
     }
     if (treeConfig && !scrollYLoad && !treeOpts.transform) {
       rowChildren = row[childrenField]
@@ -381,13 +393,13 @@ function renderRows (h: CreateElement, _vm: any, $xetable: any, fixedType: any,
           'vxe-body--row',
           treeConfig ? `row--level-${rowLevel}` : '',
           {
-            'row--stripe': stripe && ($xetable.getVTRowIndex(row) + 1) % 2 === 0,
+            'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
             'is--new': isNewRow,
             'is--expand-row': isExpandRow,
             'is--expand-tree': isExpandTree,
             'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
-            'row--radio': radioOpts.highlight && $xetable.selectRadioRow === row,
-            'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row),
+            'row--radio': radioOpts.highlight && $xeTable.selectRadioRow === row,
+            'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
             'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
           },
           rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
@@ -396,10 +408,10 @@ function renderRows (h: CreateElement, _vm: any, $xetable: any, fixedType: any,
           rowid
         },
         style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-        key: (rowKey || rowOpts.useKey) || treeConfig ? rowid : $rowIndex,
+        key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
         on: trOn
       }, tableColumn.map((column: any, $columnIndex: any) => {
-        return renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
+        return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
       }))
     )
     // 如果行被展开了
@@ -414,7 +426,7 @@ function renderRows (h: CreateElement, _vm: any, $xetable: any, fixedType: any,
       }
       const { showOverflow } = expandColumn
       const hasEllipsis = (XEUtils.isUndefined(showOverflow) || XEUtils.isNull(showOverflow)) ? allColumnOverflow : showOverflow
-      const expandParams = { $table: $xetable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex }
+      const expandParams = { $table: $xeTable, seq, column: expandColumn, fixed: fixedType, type: renderType, level: rowLevel, row, rowIndex, $rowIndex }
       rows.push(
         h('tr', {
           class: ['vxe-body--expanded-row', {
@@ -449,7 +461,7 @@ function renderRows (h: CreateElement, _vm: any, $xetable: any, fixedType: any,
     }
     // 如果是树形表格
     if (isExpandTree) {
-      rows.push(...renderRows(h, _vm, $xetable, fixedType, rowChildren, tableColumn))
+      rows.push(...renderRows(h, _vm, $xeTable, fixedType, rowChildren, tableColumn))
     }
   })
   return rows
@@ -501,7 +513,7 @@ export default {
   },
   render (this: any, h: CreateElement) {
     const { _e, $parent: $xetable, fixedColumn, fixedType } = this
-    let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts } = $xetable
+    let { $scopedSlots, tId, tableData, tableColumn, visibleColumn, expandColumn, showOverflow: allColumnOverflow, keyboardConfig, keyboardOpts, mergeList, spanMethod, scrollXLoad, scrollYLoad, isAllOverflow, emptyOpts, mouseConfig, mouseOpts, sYOpts, rowOpts, isDragRowMove } = $xetable
     // 如果是使用优化模式
     if (fixedType) {
       // 如果存在展开行使用全量渲染
@@ -580,9 +592,16 @@ export default {
         /**
          * 内容
          */
-        h('tbody', {
-          ref: 'tbody'
-        }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))
+        rowOpts.drag
+          ? h('transition-group', {
+            props: {
+              tag: 'tbody',
+              name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
+            }
+          }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))
+          : h('tbody', {
+            ref: 'tbody'
+          }, renderRows(h, this, $xetable, fixedType, tableData, tableColumn))
       ]),
       h('div', {
         class: 'vxe-table--checkbox-range'

package/packages/table/src/cell.ts

@@ -6,7 +6,7 @@ import { updateCellTitle } from '../../ui/src/dom'
 import { createColumn, getRowid } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 
-const { getI18n, getIcon, renderer, formats } = VxeUI
+const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI
 
 function renderTitlePrefixIcon (h: CreateElement, params: any) {
   const { $table, column } = params
@@ -48,6 +48,38 @@ function renderTitleSuffixIcon (h: CreateElement, params: any) {
     : []
 }
 
+function renderCellDragIcon (h: CreateElement, params: any) {
+  const { $table } = params
+  return h('span', {
+    key: 'dg',
+    class: 'vxe-cell--drag-handle',
+    on: {
+      mousedown (evnt: DragEvent) {
+        $table.handleCellDragMousedownEvent(evnt, params)
+      },
+      mouseup: $table.handleCellDragMouseupEvent
+    }
+  }, [
+    h('i', {
+      class: 'vxe-table-icon-drag-handle'
+    })
+  ])
+}
+
+function renderCellBaseVNs (h: CreateElement, params: any, content: any) {
+  const { $table, column } = params
+  const { dragSort } = column
+  const vns: any[] = XEUtils.isArray(content) ? content : [content]
+  const rowOpts = $table.computeRowOpts
+  const dragOpts = $table.computeDragOpts
+  if (dragSort && rowOpts.drag && dragOpts.showIcon) {
+    vns.unshift(
+      renderCellDragIcon(h, params)
+    )
+  }
+  return vns
+}
+
 function renderTitleContent (h: CreateElement, params: any, content: any) {
   const { $table, column } = params
   const { type, showHeaderOverflow } = column
@@ -234,7 +266,7 @@ export const Cell = {
     const { slots, editRender, cellRender } = column
     const renderOpts = editRender || cellRender
     if (slots && slots.default) {
-      return $table.callSlot(slots.default, params, h)
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h))
     }
     if (renderOpts) {
       const compConf = renderer.get(renderOpts.name)
@@ -242,12 +274,12 @@ export const Cell = {
       const rtCell = compConf ? (compConf.renderTableCell || compConf.renderCell) : null
       const renderFn = editRender ? rtCell : rtDefault
       if (renderFn) {
-        return getSlotVNs(renderFn.call($table, h, renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params)))
+        return renderCellBaseVNs(h, params, getSlotVNs(renderFn.call($table, h, renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params))))
       }
     }
     const cellValue = $table.getCellLabel(row, column)
     const cellPlaceholder = editRender ? editRender.placeholder : ''
-    return [
+    return renderCellBaseVNs(h, params, [
       h('span', {
         class: 'vxe-cell--label'
       }, [
@@ -258,7 +290,7 @@ export const Cell = {
           }, formatText(getFuncText(cellPlaceholder), 1))
           : h('span', formatText(cellValue, 1))
       ])
-    ]
+    ])
   },
   renderTreeCell (h: CreateElement, params: any) {
     return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params))
@@ -348,11 +380,13 @@ export const Cell = {
     const { treeConfig, seqOpts } = $table
     const { slots } = column
     if (slots && slots.default) {
-      return $table.callSlot(slots.default, params, h)
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h))
     }
     const { seq } = params
     const seqMethod = seqOpts.seqMethod
-    return [formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)]
+    return renderCellBaseVNs(h, params, [
+      h('span', `${formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)}`)
+    ])
   },
   renderTreeIndexCell (h: CreateElement, params: any) {
     return Cell.renderTreeIcon(h, params, Cell.renderSeqCell(h, params))
@@ -400,7 +434,7 @@ export const Cell = {
     }
     const radioParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible }
     if (radioSlot) {
-      return $table.callSlot(radioSlot, radioParams, h)
+      return renderCellBaseVNs(h, params, $table.callSlot(radioSlot, radioParams, h))
     }
     const radioVNs = []
     if (isVisible) {
@@ -417,7 +451,7 @@ export const Cell = {
         }, defaultSlot ? $table.callSlot(defaultSlot, radioParams, h) : XEUtils.get(row, labelField))
       )
     }
-    return [
+    return renderCellBaseVNs(h, params, [
       h('span', {
         class: ['vxe-cell--radio', {
           'is--checked': isChecked,
@@ -425,7 +459,7 @@ export const Cell = {
         }],
         on
       }, radioVNs)
-    ]
+    ])
   },
   renderTreeRadioCell (h: CreateElement, params: any) {
     return Cell.renderTreeIcon(h, params, Cell.renderRadioCell(h, params))
@@ -518,7 +552,7 @@ export const Cell = {
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
     if (checkboxSlot) {
-      return $table.callSlot(checkboxSlot, checkboxParams, h)
+      return renderCellBaseVNs(h, params, $table.callSlot(checkboxSlot, checkboxParams, h))
     }
     const checkVNs = []
     if (isVisible) {
@@ -535,7 +569,7 @@ export const Cell = {
         }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField))
       )
     }
-    return [
+    return renderCellBaseVNs(h, params, [
       h('span', {
         class: ['vxe-cell--checkbox', {
           'is--checked': isChecked,
@@ -545,7 +579,7 @@ export const Cell = {
         }],
         on
       }, checkVNs)
-    ]
+    ])
   },
   renderTreeSelectionCell (h: CreateElement, params: any) {
     return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCell(h, params))
@@ -582,7 +616,7 @@ export const Cell = {
     }
     const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: isIndeterminate }
     if (checkboxSlot) {
-      return $table.callSlot(checkboxSlot, checkboxParams, h)
+      return renderCellBaseVNs(h, params, $table.callSlot(checkboxSlot, checkboxParams, h))
     }
     const checkVNs = []
     if (isVisible) {
@@ -599,7 +633,7 @@ export const Cell = {
         }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField))
       )
     }
-    return [
+    return renderCellBaseVNs(h, params, [
       h('span', {
         class: ['vxe-cell--checkbox', {
           'is--checked': isChecked,
@@ -609,7 +643,7 @@ export const Cell = {
         }],
         on
       }, checkVNs)
-    ]
+    ])
   },
   renderTreeSelectionCellByProp (h: CreateElement, params: any) {
     return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCellByProp(h, params))
@@ -627,7 +661,7 @@ export const Cell = {
     let isAceived = false
     let isLazyLoading = false
     if (slots && slots.icon) {
-      return $table.callSlot(slots.icon, params, h)
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.icon, params, h))
     }
     if (!isHidden) {
       const rowid = getRowid($table, row)
@@ -636,7 +670,7 @@ export const Cell = {
         isLazyLoading = !!rowExpandLazyLoadedMaps[rowid]
       }
     }
-    return [
+    return renderCellBaseVNs(h, params, [
       showIcon && (!visibleMethod || visibleMethod(params))
         ? h('span', {
           class: ['vxe-table--expanded', {
@@ -652,13 +686,13 @@ export const Cell = {
             class: ['vxe-table--expand-btn', isLazyLoading ? (iconLoaded || getIcon().TABLE_EXPAND_LOADED) : (isAceived ? (iconOpen || getIcon().TABLE_EXPAND_OPEN) : (iconClose || getIcon().TABLE_EXPAND_CLOSE))]
           })
         ])
-        : null,
+        : renderEmptyElement($table),
       defaultSlot || labelField
         ? h('span', {
           class: 'vxe-table--expand-label'
         }, defaultSlot ? $table.callSlot(defaultSlot, params, h) : XEUtils.get(row, labelField))
-        : null
-    ]
+        : renderEmptyElement($table)
+    ])
   },
   renderExpandData (h: CreateElement, params: any) {
     const { $table, column } = params
@@ -683,16 +717,16 @@ export const Cell = {
     const { $table, column } = params
     const { slots } = column
     if (slots && slots.default) {
-      return $table.callSlot(slots.default, params, h)
+      return renderCellBaseVNs(h, params, $table.callSlot(slots.default, params, h))
     }
-    return [
+    return renderCellBaseVNs(h, params, [
       h('span', {
         class: 'vxe-cell--html',
         domProps: {
           innerHTML: getDefaultCellLabel(params)
         }
       })
-    ]
+    ])
   },
   renderTreeHTMLCell (h: CreateElement, params: any) {
     return Cell.renderTreeIcon(h, params, Cell.renderHTMLCell(h, params))

package/packages/table/src/column.ts

@@ -64,8 +64,10 @@ const props = {
   filterRecoverMethod: Function,
   // 筛选模板配置项
   filterRender: Object,
-  // 指定为树节点
+  // 设置为树节点
   treeNode: Boolean,
+  // 设置为拖拽排序
+  dragSort: Boolean,
   // 是否可视
   visible: { type: Boolean, default: null },
   // 表头单元格数据导出方法

package/packages/table/src/columnInfo.ts

@@ -88,6 +88,7 @@ export class ColumnInfo {
       filterRecoverMethod: _vm.filterRecoverMethod,
       filterRender: _vm.filterRender,
       treeNode: _vm.treeNode,
+      dragSort: _vm.dragSort,
       cellType: _vm.cellType,
       cellRender: _vm.cellRender,
       editRender: _vm.editRender,