vxe-table 4.13.21 → 4.13.23

package/es/table/render/index.js

@@ -144,7 +144,7 @@ const blurEvent = 'blur';
  * @param modelFunc
  * @param changeFunc
  */
-function getComponentOns(renderOpts, params, eFns) {
+function getComponentOns(renderOpts, params, eFns, eventOns) {
     const { events } = renderOpts;
     const modelEvent = getModelEvent(renderOpts);
     const changeEvent = getChangeEvent(renderOpts);
@@ -182,7 +182,7 @@ function getComponentOns(renderOpts, params, eFns) {
             }
         };
     }
-    return ons;
+    return eventOns ? Object.assign(ons, eventOns) : ons;
 }
 function getEditOns(renderOpts, params) {
     const { $table, row, column } = params;
@@ -706,6 +706,75 @@ renderer.mixin({
         renderTableFilter: defaultFilterRender,
         tableFilterDefaultMethod: handleFilterMethod
     },
+    VxeDateRangePicker: {
+        tableAutoFocus: 'input',
+        renderTableEdit(renderOpts, params) {
+            const { startField, endField } = renderOpts;
+            const { $table, row, column } = params;
+            const { model } = column;
+            const cellValue = getCellValue(row, column);
+            const seProps = {};
+            const seOs = {};
+            if (startField && endField) {
+                seProps.startValue = XEUtils.get(row, startField);
+                seProps.endValue = XEUtils.get(row, endField);
+                seOs['onUpdate:startValue'] = (value) => {
+                    if (startField) {
+                        XEUtils.set(row, startField, value);
+                    }
+                };
+                seOs['onUpdate:endValue'] = (value) => {
+                    if (endField) {
+                        XEUtils.set(row, endField, value);
+                    }
+                };
+            }
+            return [
+                h(getDefaultComponent(renderOpts), Object.assign(Object.assign({}, getCellEditProps(renderOpts, params, cellValue, seProps)), getComponentOns(renderOpts, params, {
+                    model(cellValue) {
+                        model.update = true;
+                        model.value = cellValue;
+                        setCellValue(row, column, cellValue);
+                    },
+                    change() {
+                        $table.updateStatus(params);
+                    },
+                    blur() {
+                        $table.handleCellRuleUpdateStatus('blur', params);
+                    }
+                }, seOs)))
+            ];
+        },
+        renderTableCell(renderOpts, params) {
+            const { startField, endField } = renderOpts;
+            const { row, column } = params;
+            let startValue = '';
+            let endValue = '';
+            if (startField && endField) {
+                startValue = XEUtils.get(row, startField);
+                endValue = XEUtils.get(row, endField);
+            }
+            else {
+                const cellValue = XEUtils.get(row, column.field);
+                if (cellValue) {
+                    if (XEUtils.isArray(cellValue)) {
+                        startValue = cellValue[0];
+                        endValue = cellValue[1];
+                    }
+                    else {
+                        const strs = `${cellValue}`.split(',');
+                        startValue = strs[0];
+                        endValue = strs[1];
+                    }
+                }
+            }
+            let cellLabel = '';
+            if (startValue && endValue) {
+                cellLabel = `${startValue} ~ ${endValue}`;
+            }
+            return getCellLabelVNs(renderOpts, params, cellLabel);
+        }
+    },
     VxeTextarea: {
         tableAutoFocus: 'textarea',
         renderTableEdit: defaultEditRender,

package/es/table/src/cell.js

@@ -10,15 +10,19 @@ function renderTitlePrefixIcon(params) {
     const { $table, column } = params;
     const titlePrefix = column.titlePrefix || column.titleHelp;
     if (titlePrefix) {
-        return h('i', {
-            class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : '', titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX],
+        return h('span', {
+            class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : ''],
             onMouseenter(evnt) {
                 $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
             },
             onMouseleave(evnt) {
                 $table.handleTargetLeaveEvent(evnt);
             }
-        });
+        }, [
+            h('i', {
+                class: titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX
+            })
+        ]);
     }
     return renderEmptyElement($table);
 }
@@ -26,15 +30,19 @@ function renderTitleSuffixIcon(params) {
     const { $table, column } = params;
     const titleSuffix = column.titleSuffix;
     if (titleSuffix) {
-        return h('i', {
-            class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : '', titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX],
+        return h('span', {
+            class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : ''],
             onMouseenter(evnt) {
                 $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
             },
             onMouseleave(evnt) {
                 $table.handleTargetLeaveEvent(evnt);
             }
-        });
+        }, [
+            h('i', {
+                class: titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX
+            })
+        ]);
     }
     return renderEmptyElement($table);
 }
@@ -1009,14 +1017,20 @@ export const Cell = {
         if (isEnableConf(editConfig)) {
             editIconVNs = [
                 isRequired && editOpts.showAsterisk
-                    ? h('i', {
+                    ? h('span', {
                         class: 'vxe-cell--required-icon'
-                    })
+                    }, [
+                        h('i')
+                    ])
                     : renderEmptyElement($table),
                 isEnableConf(editRender) && editOpts.showIcon
-                    ? h('i', {
-                        class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
-                    })
+                    ? h('span', {
+                        class: 'vxe-cell--edit-icon'
+                    }, [
+                        h('i', {
+                            class: editOpts.icon || getIcon().TABLE_EDIT
+                        })
+                    ])
                     : renderEmptyElement($table)
             ];
         }

package/es/table/src/util.js

@@ -1,7 +1,7 @@
 import { watch, reactive, nextTick } from 'vue';
 import XEUtils from 'xe-utils';
 import { ColumnInfo } from './columnInfo';
-import { isPx, isScale } from '../../ui/src/dom';
+import { isPx, isScale, queryElement } from '../../ui/src/dom';
 import { eqEmptyValue } from '../../ui/src/utils';
 const getAllConvertColumns = (columns, parentColumn) => {
     const result = [];
@@ -165,7 +165,7 @@ function getPaddingLeftRightSize(elem) {
     }
     return 0;
 }
-function getElementMarginWidth(elem) {
+function getElementMarginAndWidth(elem) {
     if (elem) {
         const computedStyle = getComputedStyle(elem);
         const marginLeft = XEUtils.toNumber(computedStyle.marginLeft);
@@ -174,9 +174,6 @@ function getElementMarginWidth(elem) {
     }
     return 0;
 }
-function queryCellElement(cell, selector) {
-    return cell.querySelector('.vxe-cell' + selector);
-}
 export function toFilters(filters) {
     if (filters && XEUtils.isArray(filters)) {
         return filters.map(({ label, value, data, resetValue, checked }) => {
@@ -255,19 +252,19 @@ export function getColReMinWidth(params) {
     const showTitle = headOverflow === 'title';
     const showTooltip = headOverflow === true || headOverflow === 'tooltip';
     const hasEllipsis = showTitle || showTooltip || showEllipsis;
-    const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.6);
-    const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryCellElement(cell, ''));
+    const minTitleWidth = XEUtils.floor((XEUtils.toNumber(getComputedStyle(cell).fontSize) || 14) * 1.8);
+    const paddingLeftRight = getPaddingLeftRightSize(cell) + getPaddingLeftRightSize(queryElement(cell, '.vxe-cell'));
     let mWidth = minTitleWidth + paddingLeftRight;
     // 默认最小宽处理
     if (hasEllipsis) {
-        const dragIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--drag-handle'));
-        const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '>.vxe-cell--checkbox'));
-        const requiredIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon'));
-        const editIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon'));
-        const prefixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon'));
-        const suffixIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon'));
-        const sortIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--sort'));
-        const filterIconWidth = getElementMarginWidth(queryCellElement(cell, '>.vxe-cell--filter'));
+        const dragIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--drag-handle'));
+        const checkboxIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--checkbox'));
+        const requiredIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--required-icon'));
+        const editIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--edit-icon'));
+        const prefixIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell-title-prefix-icon'));
+        const suffixIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell-title-suffix-icon'));
+        const sortIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--sort'));
+        const filterIconWidth = getElementMarginAndWidth(queryElement(cell, '.vxe-cell--filter'));
         mWidth += dragIconWidth + checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth;
     }
     // 如果设置最小宽

package/es/table/style.css

@@ -1806,6 +1806,7 @@
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-select,
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-tree-select,
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-date-picker,
+.vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-date-range-picker,
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-number-input,
 .vxe-header--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-ico-picker,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-input,
@@ -1813,6 +1814,7 @@
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-select,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-tree-select,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-date-picker,
+.vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-date-range-picker,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-number-input,
 .vxe-footer--column.fixed--width > .vxe-cell > .vxe-cell--wrapper .vxe-ico-picker {
   width: 100%;
@@ -1821,7 +1823,7 @@
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-default-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-default-textarea, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-default-select {
   width: 100%;
 }
-.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-textarea, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-tree-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-date-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-number-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-ico-picker {
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-textarea, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-tree-select, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-date-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-date-range-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-number-input, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-ico-picker {
   width: 100%;
 }
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-default-input,
@@ -1832,6 +1834,7 @@
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-select,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-tree-select,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-date-picker,
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-date-range-picker,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-number-input,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-row-group--tree-node .vxe-ico-picker, .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-default-input,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-default-textarea,
@@ -1841,6 +1844,7 @@
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-select,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-tree-select,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-date-picker,
+.vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-date-range-picker,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-number-input,
 .vxe-body--column.fixed--width > .vxe-cell > .vxe-cell--wrapper > .vxe-cell--tree-node .vxe-ico-picker {
   width: 100%;
@@ -1849,7 +1853,7 @@
 .vxe-table--filter-template > .vxe-default-input, .vxe-table--filter-template > .vxe-default-textarea, .vxe-table--filter-template > .vxe-default-select {
   width: 100%;
 }
-.vxe-table--filter-template > .vxe-input, .vxe-table--filter-template > .vxe-textarea, .vxe-table--filter-template > .vxe-select, .vxe-table--filter-template > .vxe-tree-select, .vxe-table--filter-template > .vxe-date-picker, .vxe-table--filter-template > .vxe-number-input, .vxe-table--filter-template > .vxe-ico-picker {
+.vxe-table--filter-template > .vxe-input, .vxe-table--filter-template > .vxe-textarea, .vxe-table--filter-template > .vxe-select, .vxe-table--filter-template > .vxe-tree-select, .vxe-table--filter-template > .vxe-date-picker, .vxe-table--filter-template > .vxe-date-range-picker, .vxe-table--filter-template > .vxe-number-input, .vxe-table--filter-template > .vxe-ico-picker {
   width: 100%;
 }
 
@@ -2287,29 +2291,38 @@
   position: relative;
   font-weight: var(--vxe-ui-table-header-font-weight);
 }
-.vxe-header--column.col--ellipsis > .vxe-cell {
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper {
   display: flex;
   align-items: center;
 }
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--drag-handle,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--sort,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--filter,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell-title-prefix-icon,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell-title-suffix-icon,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--checkbox,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell-title-suffix-icon,
+.vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--wrapper .vxe-cell--required-icon {
+  flex-shrink: 0;
+}
 .vxe-header--column.col--ellipsis > .vxe-cell .vxe-cell--title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.vxe-header--column.col--ellipsis > .vxe-cell > i:not(.vxe-cell--title), .vxe-header--column.col--ellipsis > .vxe-cell > span:not(.vxe-cell--title) {
-  flex-shrink: 0;
-}
 .vxe-header--column .vxe-cell--required-icon {
   display: inline-block;
   color: var(--vxe-ui-table-validate-error-color);
   width: 0.8em;
   height: 1em;
   line-height: 1em;
+  position: relative;
+}
+.vxe-header--column .vxe-cell--required-icon > i {
   font-family: Verdana, Arial, Tahoma;
   font-weight: normal;
-  position: relative;
 }
-.vxe-header--column .vxe-cell--required-icon:before {
+.vxe-header--column .vxe-cell--required-icon > i:before {
   content: "*";
   position: absolute;
   left: 0;