vxe-table 3.10.0 → 3.10.2

package/es/table/src/body.js

@@ -255,7 +255,7 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
             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
@@ -263,36 +263,48 @@ function renderColumn(h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, ro
         on: tdOns
     }, tdVNs);
 }
-function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
-    const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, showOverflow: allColumnOverflow, treeConfig, treeOpts, expandOpts, editOpts, treeExpandedMaps, scrollYLoad, rowExpandedMaps, radioOpts, checkboxOpts, expandColumn, hasFixedColumn, fullAllDataRowIdData, rowOpts, pendingRowList, pendingRowMaps } = $xetable;
+function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
+    const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, showOverflow: allColumnOverflow, treeConfig, treeOpts, expandOpts, editOpts, treeExpandedMaps, scrollYLoad, rowExpandedMaps, radioOpts, checkboxOpts, expandColumn, hasFixedColumn, fullAllDataRowIdData, rowOpts, pendingRowList, pendingRowMaps } = $xeTable;
     const childrenField = treeOpts.children || treeOpts.childrenField;
     const rows = [];
     tableData.forEach((row, $rowIndex) => {
         const trOn = {};
         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) => {
-                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();
             };
         }
-        const rowid = getRowid($xetable, row);
+        // 拖拽行事件
+        if (rowOpts.drag) {
+            trOn.dragstart = (evnt) => {
+                $xeTable.handleRowDragDragstartEvent(evnt);
+            };
+            trOn.dragover = (evnt) => {
+                $xeTable.handleRowDragDragoverEvent(evnt);
+            };
+            trOn.dragend = (evnt) => {
+                $xeTable.handleRowDragDragendEvent(evnt);
+            };
+        }
+        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];
         // 树节点是否被展开
@@ -301,7 +313,7 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
         // 是否新增行
         let isNewRow = false;
         if (editConfig) {
-            isNewRow = $xetable.isInsertByRow(row);
+            isNewRow = $xeTable.isInsertByRow(row);
         }
         if (treeConfig && !scrollYLoad && !treeOpts.transform) {
             rowChildren = row[childrenField];
@@ -312,13 +324,13 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
                 '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) : ''
@@ -327,10 +339,10 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
                 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, $columnIndex) => {
-            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);
         })));
         // 如果行被展开了
         if (isExpandRow) {
@@ -344,7 +356,7 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
             }
             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', {
                         'is--padding': padding
@@ -377,7 +389,7 @@ function renderRows(h, _vm, $xetable, fixedType, tableData, tableColumn) {
         }
         // 如果是树形表格
         if (isExpandTree) {
-            rows.push(...renderRows(h, _vm, $xetable, fixedType, rowChildren, tableColumn));
+            rows.push(...renderRows(h, _vm, $xeTable, fixedType, rowChildren, tableColumn));
         }
     });
     return rows;
@@ -428,7 +440,7 @@ export default {
     },
     render(h) {
         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) {
             // 如果存在展开行使用全量渲染
@@ -511,9 +523,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/es/table/src/cell.js

@@ -4,7 +4,7 @@ import { getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/sr
 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, params) {
     const { $table, column } = params;
     const titlePrefix = column.titlePrefix || column.titleHelp;
@@ -43,6 +43,34 @@ function renderTitleSuffixIcon(h, params) {
         ]
         : [];
 }
+function renderCellDragIcon(h, params) {
+    const { $table } = params;
+    return h('span', {
+        key: 'dg',
+        class: 'vxe-cell--drag-handle',
+        on: {
+            mousedown(evnt) {
+                $table.handleCellDragMousedownEvent(evnt, params);
+            },
+            mouseup: $table.handleCellDragMouseupEvent
+        }
+    }, [
+        h('i', {
+            class: 'vxe-table-icon-drag-handle'
+        })
+    ]);
+}
+function renderCellBaseVNs(h, params, content) {
+    const { $table, column } = params;
+    const { dragSort } = column;
+    const vns = 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, params, content) {
     const { $table, column } = params;
     const { type, showHeaderOverflow } = column;
@@ -231,7 +259,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);
@@ -239,12 +267,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'
             }, [
@@ -255,7 +283,7 @@ export const Cell = {
                     }, formatText(getFuncText(cellPlaceholder), 1))
                     : h('span', formatText(cellValue, 1))
             ])
-        ];
+        ]);
     },
     renderTreeCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderDefaultCell.call(this, h, params));
@@ -343,11 +371,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, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderSeqCell(h, params));
@@ -394,7 +424,7 @@ export const Cell = {
         }
         const radioParams = Object.assign(Object.assign({}, 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) {
@@ -407,7 +437,7 @@ export const Cell = {
                 class: 'vxe-radio--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, radioParams, h) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: ['vxe-cell--radio', {
                         'is--checked': isChecked,
@@ -415,7 +445,7 @@ export const Cell = {
                     }],
                 on
             }, radioVNs)
-        ];
+        ]);
     },
     renderTreeRadioCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderRadioCell(h, params));
@@ -507,7 +537,7 @@ export const Cell = {
         }
         const checkboxParams = Object.assign(Object.assign({}, 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) {
@@ -520,7 +550,7 @@ export const Cell = {
                 class: 'vxe-checkbox--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
@@ -530,7 +560,7 @@ export const Cell = {
                     }],
                 on
             }, checkVNs)
-        ];
+        ]);
     },
     renderTreeSelectionCell(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCell(h, params));
@@ -567,7 +597,7 @@ export const Cell = {
         }
         const checkboxParams = Object.assign(Object.assign({}, 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) {
@@ -580,7 +610,7 @@ export const Cell = {
                 class: 'vxe-checkbox--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             h('span', {
                 class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
@@ -590,7 +620,7 @@ export const Cell = {
                     }],
                 on
             }, checkVNs)
-        ];
+        ]);
     },
     renderTreeSelectionCellByProp(h, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderCheckboxCellByProp(h, params));
@@ -607,7 +637,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);
@@ -616,7 +646,7 @@ export const Cell = {
                 isLazyLoading = !!rowExpandLazyLoadedMaps[rowid];
             }
         }
-        return [
+        return renderCellBaseVNs(h, params, [
             showIcon && (!visibleMethod || visibleMethod(params))
                 ? h('span', {
                     class: ['vxe-table--expanded', {
@@ -632,13 +662,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, params) {
         const { $table, column } = params;
@@ -662,16 +692,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, params) {
         return Cell.renderTreeIcon(h, params, Cell.renderHTMLCell(h, params));

package/es/table/src/column.js

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

package/es/table/src/columnInfo.js

@@ -85,6 +85,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,