vxe-table 3.15.21 → 3.15.23

package/es/table/render/index.js

@@ -143,7 +143,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);
@@ -181,7 +181,7 @@ function getComponentOns(renderOpts, params, eFns) {
             }
         };
     }
-    return ons;
+    return eventOns ? Object.assign(ons, eventOns) : ons;
 }
 function getEditOns(renderOpts, params) {
     const { $table, row, column } = params;
@@ -770,6 +770,78 @@ renderer.mixin({
         renderTableFilter: defaultFilterRender,
         tableFilterDefaultMethod: handleFilterMethod
     },
+    VxeDateRangePicker: {
+        tableAutoFocus: 'input',
+        renderTableEdit(h, 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['update:startValue'] = (value) => {
+                    if (startField) {
+                        XEUtils.set(row, startField, value);
+                    }
+                };
+                seOs['update:endValue'] = (value) => {
+                    if (endField) {
+                        XEUtils.set(row, endField, value);
+                    }
+                };
+            }
+            return [
+                h(getDefaultComponent(renderOpts), {
+                    props: getCellEditProps(renderOpts, params, cellValue, seProps),
+                    on: 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(h, 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(h, renderOpts, params, cellLabel);
+        }
+    },
     VxeTextarea: {
         tableAutoFocus: 'textarea',
         renderTableEdit: defaultEditRender

package/es/table/src/cell.js

@@ -10,7 +10,7 @@ function renderTitlePrefixIcon(h, 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],
+            class: ['vxe-cell-title-prefix-icon', titlePrefix.iconStatus ? `theme--${titlePrefix.iconStatus}` : ''],
             on: {
                 mouseenter(evnt) {
                     $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
@@ -19,7 +19,11 @@ function renderTitlePrefixIcon(h, params) {
                     $table.handleTargetLeaveEvent(evnt);
                 }
             }
-        });
+        }, [
+            h('i', {
+                class: titlePrefix.icon || getIcon().TABLE_TITLE_PREFIX
+            })
+        ]);
     }
     return renderEmptyElement($table);
 }
@@ -28,7 +32,7 @@ function renderTitleSuffixIcon(h, 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],
+            class: ['vxe-cell-title-suffix-icon', titleSuffix.iconStatus ? `theme--${titleSuffix.iconStatus}` : ''],
             on: {
                 mouseenter(evnt) {
                     $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
@@ -37,7 +41,11 @@ function renderTitleSuffixIcon(h, params) {
                     $table.handleTargetLeaveEvent(evnt);
                 }
             }
-        });
+        }, [
+            h('i', {
+                class: titleSuffix.icon || getIcon().TABLE_TITLE_SUFFIX
+            })
+        ]);
     }
     return renderEmptyElement($table);
 }
@@ -1019,12 +1027,18 @@ export const Cell = {
                 isRequired && editOpts.showAsterisk
                     ? h('i', {
                         class: 'vxe-cell--required-icon'
-                    })
+                    }, [
+                        h('i', {
+                            class: 'vxe-cell--required-icon'
+                        })
+                    ])
                     : renderEmptyElement($table),
                 isEnableConf(editRender) && editOpts.showIcon
                     ? h('i', {
-                        class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
-                    })
+                        class: 'vxe-cell--edit-icon'
+                    }, [
+                        h('i')
+                    ])
                     : renderEmptyElement($table)
             ];
         }

package/es/table/src/util.js

@@ -1,6 +1,6 @@
 import XEUtils from 'xe-utils';
 import { ColumnInfo } from './columnInfo';
-import { isScale, isPx } from '../../ui/src/dom';
+import { isScale, isPx, queryElement } from '../../ui/src/dom';
 import { warnLog, errLog } from '../../ui/src/log';
 import { eqEmptyValue } from '../../ui/src/utils';
 const getAllConvertColumns = (columns, parentColumn) => {
@@ -154,7 +154,7 @@ function getPaddingLeftRightSize(elem) {
     }
     return 0;
 }
-function getElementMarginWidth(elem) {
+function getElementMarginAndWidth(elem) {
     if (elem) {
         const computedStyle = getComputedStyle(elem);
         const marginLeft = XEUtils.toNumber(computedStyle.marginLeft);
@@ -232,9 +232,6 @@ export function getRootColumn($xeTable, column) {
     }
     return column;
 }
-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 }) => {
@@ -262,19 +259,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, ''));
     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;