vxe-table 4.8.0 → 4.8.2

package/es/table/src/cell.js

@@ -5,7 +5,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(params) {
     const { $table, column } = params;
     const titlePrefix = column.titlePrefix || column.titleHelp;
@@ -40,6 +40,42 @@ function renderTitleSuffixIcon(params) {
         ]
         : [];
 }
+function renderCellDragIcon(params) {
+    const { $table } = params;
+    const { computeDragOpts } = $table.getComputeMaps();
+    const dragOpts = computeDragOpts.value;
+    const { rowDisabledMethod } = dragOpts;
+    const isDisabled = rowDisabledMethod && rowDisabledMethod(params);
+    return h('span', {
+        key: 'dg',
+        class: ['vxe-cell--drag-handle', {
+                'is--disabled': isDisabled
+            }],
+        onMousedown(evnt) {
+            if (!isDisabled) {
+                $table.handleCellDragMousedownEvent(evnt, params);
+            }
+        },
+        onMouseup: $table.handleCellDragMouseupEvent
+    }, [
+        h('i', {
+            class: 'vxe-table-icon-drag-handle'
+        })
+    ]);
+}
+function renderCellBaseVNs(params, content) {
+    const { $table, column } = params;
+    const { dragSort } = column;
+    const vns = XEUtils.isArray(content) ? content : [content];
+    const { computeRowOpts, computeDragOpts } = $table.getComputeMaps();
+    const rowOpts = computeRowOpts.value;
+    const dragOpts = computeDragOpts.value;
+    const { showRowIcon, rowVisibleMethod } = dragOpts;
+    if (dragSort && rowOpts.drag && (showRowIcon && (!rowVisibleMethod || rowVisibleMethod(params)))) {
+        vns.unshift(renderCellDragIcon(params));
+    }
+    return vns;
+}
 function renderTitleContent(params, content) {
     const { $table, column } = params;
     const { props, reactData } = $table;
@@ -233,7 +269,7 @@ export const Cell = {
         const renderOpts = editRender || cellRender;
         const defaultSlot = slots ? slots.default : null;
         if (defaultSlot) {
-            return $table.callSlot(defaultSlot, params);
+            return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
         }
         if (renderOpts) {
             const compConf = renderer.get(renderOpts.name);
@@ -242,13 +278,13 @@ export const Cell = {
                 const rtDefault = compConf.renderTableDefault || compConf.renderDefault;
                 const renderFn = editRender ? rtCell : rtDefault;
                 if (renderFn) {
-                    return getSlotVNs(renderFn(renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params)));
+                    return renderCellBaseVNs(params, getSlotVNs(renderFn(renderOpts, Object.assign({ $type: editRender ? 'edit' : 'cell' }, params))));
                 }
             }
         }
         const cellValue = $table.getCellLabel(row, column);
         const cellPlaceholder = editRender ? editRender.placeholder : '';
-        return [
+        return renderCellBaseVNs(params, [
             h('span', {
                 class: 'vxe-cell--label'
             }, [
@@ -259,7 +295,7 @@ export const Cell = {
                     }, formatText(getFuncText(cellPlaceholder), 1))
                     : h('span', formatText(cellValue, 1))
             ])
-        ];
+        ]);
     },
     renderTreeCell(params) {
         return Cell.renderTreeIcon(params, Cell.renderDefaultCell(params));
@@ -354,11 +390,13 @@ export const Cell = {
         const { slots } = column;
         const defaultSlot = slots ? slots.default : null;
         if (defaultSlot) {
-            return $table.callSlot(defaultSlot, params);
+            return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
         }
         const { seq } = params;
         const seqMethod = seqOpts.seqMethod;
-        return [formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)];
+        return renderCellBaseVNs(params, [
+            h('span', `${formatText(seqMethod ? seqMethod(params) : treeConfig ? seq : (seqOpts.startIndex || 0) + seq, 1)}`)
+        ]);
     },
     renderTreeIndexCell(params) {
         return Cell.renderTreeIcon(params, Cell.renderSeqCell(params));
@@ -408,7 +446,7 @@ export const Cell = {
         }
         const radioParams = Object.assign(Object.assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible });
         if (radioSlot) {
-            return $table.callSlot(radioSlot, radioParams);
+            return renderCellBaseVNs(params, $table.callSlot(radioSlot, radioParams));
         }
         const radioVNs = [];
         if (isVisible) {
@@ -421,12 +459,12 @@ export const Cell = {
                 class: 'vxe-radio--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, radioParams) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(params, [
             h('span', Object.assign({ class: ['vxe-cell--radio', {
                         'is--checked': isChecked,
                         'is--disabled': isDisabled
                     }] }, ons), radioVNs)
-        ];
+        ]);
     },
     renderTreeRadioCell(params) {
         return Cell.renderTreeIcon(params, Cell.renderRadioCell(params));
@@ -519,7 +557,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);
+            return renderCellBaseVNs(params, $table.callSlot(checkboxSlot, checkboxParams));
         }
         const checkVNs = [];
         if (isVisible) {
@@ -532,14 +570,14 @@ export const Cell = {
                 class: 'vxe-checkbox--label'
             }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField)));
         }
-        return [
+        return renderCellBaseVNs(params, [
             h('span', Object.assign({ class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
                         'is--disabled': isDisabled,
                         'is--indeterminate': indeterminate,
                         'is--hidden': !isVisible
                     }] }, ons), checkVNs)
-        ];
+        ]);
     },
     renderTreeSelectionCell(params) {
         return Cell.renderTreeIcon(params, Cell.renderCheckboxCell(params));
@@ -580,7 +618,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);
+            return renderCellBaseVNs(params, $table.callSlot(checkboxSlot, checkboxParams));
         }
         const checkVNs = [];
         if (isVisible) {
@@ -593,14 +631,14 @@ export const Cell = {
                 }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField)));
             }
         }
-        return [
+        return renderCellBaseVNs(params, [
             h('span', Object.assign({ class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
                         'is--disabled': isDisabled,
                         'is--indeterminate': indeterminateField && !isChecked ? row[indeterminateField] : isIndeterminate,
                         'is--hidden': !isVisible
                     }] }, ons), checkVNs)
-        ];
+        ]);
     },
     renderTreeSelectionCellByProp(params) {
         return Cell.renderTreeIcon(params, Cell.renderCheckboxCellByProp(params));
@@ -621,7 +659,7 @@ export const Cell = {
         let isAceived = false;
         let isLazyLoading = false;
         if (iconSlot) {
-            return $table.callSlot(iconSlot, params);
+            return renderCellBaseVNs(params, $table.callSlot(iconSlot, params));
         }
         if (!isHidden) {
             const rowid = getRowid($table, row);
@@ -630,7 +668,7 @@ export const Cell = {
                 isLazyLoading = !!rowExpandLazyLoadedMaps[rowid];
             }
         }
-        return [
+        return renderCellBaseVNs(params, [
             showIcon && (!visibleMethod || visibleMethod(params))
                 ? h('span', {
                     class: ['vxe-table--expanded', {
@@ -644,13 +682,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) : XEUtils.get(row, labelField))
-                : null
-        ];
+                : renderEmptyElement($table)
+        ]);
     },
     renderExpandData(params) {
         const { $table, column } = params;
@@ -678,14 +716,14 @@ export const Cell = {
         const { slots } = column;
         const defaultSlot = slots ? slots.default : null;
         if (defaultSlot) {
-            return $table.callSlot(defaultSlot, params);
+            return renderCellBaseVNs(params, $table.callSlot(defaultSlot, params));
         }
-        return [
+        return renderCellBaseVNs(params, [
             h('span', {
                 class: 'vxe-cell--html',
                 innerHTML: getDefaultCellLabel(params)
             })
-        ];
+        ]);
     },
     renderTreeHTMLCell(params) {
         return Cell.renderTreeIcon(params, Cell.renderHTMLCell(params));
@@ -850,14 +888,14 @@ export const Cell = {
             return [];
         }
         if (defaultSlot) {
-            return $table.callSlot(defaultSlot, cellParams);
+            return renderCellBaseVNs(params, $table.callSlot(defaultSlot, cellParams));
         }
         if (formatter) {
-            return [
+            return renderCellBaseVNs(params, [
                 h('span', {
                     class: 'vxe-cell--label'
                 }, getDefaultCellLabel(cellParams))
-            ];
+            ]);
         }
         return Cell.renderDefaultCell(cellParams);
     }

package/es/table/src/column.js

@@ -78,8 +78,10 @@ export const columnProps = {
     filterRecoverMethod: Function,
     // 筛选模板配置项
     filterRender: Object,
-    // 指定为树节点
+    // 设置为树节点
     treeNode: Boolean,
+    // 指定为树节点
+    dragSort: Boolean,
     // 是否可视
     visible: {
         type: Boolean,

package/es/table/src/columnInfo.js

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

package/es/table/src/emits.js

@@ -39,6 +39,9 @@ export default [
     'toggle-tree-expand',
     'menu-click',
     'edit-closed',
+    'row-dragstart',
+    'row-dragover',
+    'row-dragend',
     'edit-actived',
     'edit-activated',
     'edit-disabled',

package/es/table/src/props.js

@@ -180,6 +180,8 @@ export default {
     cellConfig: Object,
     // 行配置信息
     rowConfig: Object,
+    // 可拖拽配置项
+    dragConfig: Object,
     // 列调整配置项
     resizableConfig: Object,
     // 序号配置项