vxe-table 4.2.2 → 4.2.4-beta.0

package/es/filter/src/hook.js

@@ -198,7 +198,8 @@ var tableFilterHook = {
                     var elemStore_1 = internalData.elemStore;
                     var fixed_1 = column.fixed;
                     return $xetable.scrollToColumn(column).then(function () {
-                        var headerWrapperElem = elemStore_1[(fixed_1 || 'main') + "-header-wrapper"] || elemStore_1['main-header-wrapper'];
+                        var headerWrapperRef = elemStore_1[(fixed_1 || 'main') + "-header-wrapper"] || elemStore_1['main-header-wrapper'];
+                        var headerWrapperElem = headerWrapperRef ? headerWrapperRef.value : null;
                         if (headerWrapperElem) {
                             var filterBtnElem = headerWrapperElem.querySelector(".vxe-header--column." + column.id + " .vxe-filter--btn");
                             triggerEvent(filterBtnElem, 'click');

package/es/footer/src/footer.js

@@ -83,11 +83,11 @@ export default defineComponent({
                 var fixedType = props.fixedType;
                 var elemStore = tableInternalData.elemStore;
                 var prefix = (fixedType || 'main') + "-footer-";
-                elemStore[prefix + "wrapper"] = refElem.value;
-                elemStore[prefix + "table"] = refFooterTable.value;
-                elemStore[prefix + "colgroup"] = refFooterColgroup.value;
-                elemStore[prefix + "list"] = refFooterTFoot.value;
-                elemStore[prefix + "xSpace"] = refFooterXSpace.value;
+                elemStore[prefix + "wrapper"] = refElem;
+                elemStore[prefix + "table"] = refFooterTable;
+                elemStore[prefix + "colgroup"] = refFooterColgroup;
+                elemStore[prefix + "list"] = refFooterTFoot;
+                elemStore[prefix + "xSpace"] = refFooterXSpace;
             });
         });
         onUnmounted(function () {

package/es/header/src/header.js

@@ -136,12 +136,12 @@ export default defineComponent({
                 var internalData = $xetable.internalData;
                 var elemStore = internalData.elemStore;
                 var prefix = (fixedType || 'main') + "-header-";
-                elemStore[prefix + "wrapper"] = refElem.value;
-                elemStore[prefix + "table"] = refHeaderTable.value;
-                elemStore[prefix + "colgroup"] = refHeaderColgroup.value;
-                elemStore[prefix + "list"] = refHeaderTHead.value;
-                elemStore[prefix + "xSpace"] = refHeaderXSpace.value;
-                elemStore[prefix + "repair"] = refHeaderBorderRepair.value;
+                elemStore[prefix + "wrapper"] = refElem;
+                elemStore[prefix + "table"] = refHeaderTable;
+                elemStore[prefix + "colgroup"] = refHeaderColgroup;
+                elemStore[prefix + "list"] = refHeaderTHead;
+                elemStore[prefix + "xSpace"] = refHeaderXSpace;
+                elemStore[prefix + "repair"] = refHeaderBorderRepair;
                 uploadColumn();
             });
         });

package/es/header/style.css

@@ -62,11 +62,7 @@
 
 .vxe-header--column {
   position: relative;
-  font-weight: 700;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; }
+  font-weight: 700; }
   .vxe-header--column.col--ellipsis > .vxe-cell {
     display: flex;
     align-items: center; }

package/es/input/src/input.js

@@ -7,7 +7,7 @@ import { hasClass, getAbsolutePos, getEventTargetNode } from '../../tools/dom';
 import { GlobalEvent, hasEventKey, EVENT_KEYS } from '../../tools/event';
 import { toStringTimeDate, getDateQuarter } from './date';
 import { handleNumber, toFloatValueFixed } from './number';
-var yearSize = 20;
+var yearSize = 12;
 var monthSize = 20;
 var quarterSize = 8;
 export default defineComponent({
@@ -27,6 +27,7 @@ export default defineComponent({
         form: String,
         className: String,
         size: { type: String, default: function () { return GlobalConfig.input.size || GlobalConfig.size; } },
+        multiple: Boolean,
         // number、integer、float
         min: { type: [String, Number], default: null },
         max: { type: [String, Number], default: null },
@@ -164,6 +165,34 @@ export default defineComponent({
         var computeDateMaxTime = computed(function () {
             return props.maxDate ? XEUtils.toStringDate(props.maxDate) : null;
         });
+        var computeSupportMultiples = computed(function () {
+            return ['date', 'week', 'month', 'quarter', 'year'].includes(props.type);
+        });
+        var computeDateListValue = computed(function () {
+            var modelValue = props.modelValue, multiple = props.multiple;
+            var isDatePickerType = computeIsDatePickerType.value;
+            var dateValueFormat = computeDateValueFormat.value;
+            if (multiple && modelValue && isDatePickerType) {
+                return XEUtils.toValueString(modelValue).split(',').map(function (item) {
+                    var date = parseDate(item, dateValueFormat);
+                    if (XEUtils.isValidDate(date)) {
+                        return date;
+                    }
+                    return null;
+                });
+            }
+            return [];
+        });
+        var computeDateMultipleValue = computed(function () {
+            var dateListValue = computeDateListValue.value;
+            var dateValueFormat = computeDateValueFormat.value;
+            return dateListValue.map(function (date) { return XEUtils.toDateString(date, dateValueFormat); });
+        });
+        var computeDateMultipleLabel = computed(function () {
+            var dateListValue = computeDateListValue.value;
+            var dateLabelFormat = computeDateLabelFormat.value;
+            return dateListValue.map(function (date) { return XEUtils.toDateString(date, dateLabelFormat); }).join(', ');
+        });
         var computeDateValueFormat = computed(function () {
             var type = props.type;
             return type === 'time' ? 'HH:mm:ss' : (props.valueFormat || (type === 'datetime' ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'));
@@ -221,14 +250,17 @@ export default defineComponent({
             var years = [];
             if (selectMonth && currentDate) {
                 var currFullYear = currentDate.getFullYear();
-                var startYear = new Date(XEUtils.toNumber(('' + selectMonth.getFullYear()).replace(/\d{1}$/, '0')), 0, 1);
-                for (var index = -10; index < yearSize - 10; index++) {
-                    var date = XEUtils.getWhatYear(startYear, index, 'first');
+                var selectFullYear = selectMonth.getFullYear();
+                var startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
+                for (var index = -4; index < yearSize + 4; index++) {
+                    var date = XEUtils.getWhatYear(startYearDate, index, 'first');
                     var itemFullYear = date.getFullYear();
                     years.push({
                         date: date,
                         isCurrent: true,
+                        isPrev: index < 0,
                         isNow: currFullYear === itemFullYear,
+                        isNext: index >= yearSize,
                         year: itemFullYear
                     });
                 }
@@ -447,8 +479,8 @@ export default defineComponent({
             return minuteList;
         });
         var computeInpReadonly = computed(function () {
-            var type = props.type, readonly = props.readonly, editable = props.editable;
-            return readonly || !editable || type === 'week' || type === 'quarter';
+            var type = props.type, readonly = props.readonly, editable = props.editable, multiple = props.multiple;
+            return readonly || multiple || !editable || type === 'week' || type === 'quarter';
         });
         var computeInputType = computed(function () {
             var type = props.type;
@@ -537,10 +569,13 @@ export default defineComponent({
         };
         var hidePanelTimeout;
         var hidePanel = function () {
-            reactData.visiblePanel = false;
-            hidePanelTimeout = window.setTimeout(function () {
-                reactData.animatVisible = false;
-            }, 350);
+            return new Promise(function (resolve) {
+                reactData.visiblePanel = false;
+                hidePanelTimeout = window.setTimeout(function () {
+                    reactData.animatVisible = false;
+                    resolve();
+                }, 350);
+            });
         };
         var clearValueEvent = function (evnt, value) {
             var type = props.type;
@@ -607,7 +642,7 @@ export default defineComponent({
             var inputValue = reactData.inputValue;
             if (isDatePickerType) {
                 dateParseValue(inputValue);
-                reactData.inputValue = reactData.datePanelLabel;
+                reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
             }
         };
         /**
@@ -637,7 +672,7 @@ export default defineComponent({
             return props.min === null || XEUtils.toNumber(num) >= XEUtils.toNumber(props.min);
         };
         var dateRevert = function () {
-            reactData.inputValue = reactData.datePanelLabel;
+            reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
         };
         var dateCheckMonth = function (date) {
             var month = XEUtils.getWhatMonth(date, 0, 'first');
@@ -646,7 +681,7 @@ export default defineComponent({
             }
         };
         var dateChange = function (date) {
-            var modelValue = props.modelValue;
+            var modelValue = props.modelValue, multiple = props.multiple;
             var datetimePanelValue = reactData.datetimePanelValue;
             var isDateTimeType = computeIsDateTimeType.value;
             var dateValueFormat = computeDateValueFormat.value;
@@ -662,8 +697,39 @@ export default defineComponent({
             }
             var inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
             dateCheckMonth(date);
-            if (!XEUtils.isEqual(modelValue, inpVal)) {
-                emitModel(inpVal, { type: 'update' });
+            if (multiple) {
+                // 如果为多选
+                var dateMultipleValue = computeDateMultipleValue.value;
+                if (isDateTimeType) {
+                    // 如果是datetime特殊类型
+                    var dateListValue = computeDateListValue.value;
+                    var datetimeRest_1 = [];
+                    dateListValue.forEach(function (item) {
+                        if (item && !XEUtils.isDateSame(date, item, 'yyyyMMdd')) {
+                            item.setHours(datetimePanelValue.getHours());
+                            item.setMinutes(datetimePanelValue.getMinutes());
+                            item.setSeconds(datetimePanelValue.getSeconds());
+                            datetimeRest_1.push(item);
+                        }
+                    });
+                    datetimeRest_1.push(date);
+                    emitModel(datetimeRest_1.map(function (date) { return XEUtils.toDateString(date, dateValueFormat); }).join(','), { type: 'update' });
+                }
+                else {
+                    // 如果是日期类型
+                    if (dateMultipleValue.some(function (val) { return XEUtils.isEqual(val, inpVal); })) {
+                        emitModel(dateMultipleValue.filter(function (val) { return !XEUtils.isEqual(val, inpVal); }).join(','), { type: 'update' });
+                    }
+                    else {
+                        emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                    }
+                }
+            }
+            else {
+                // 如果为单选
+                if (!XEUtils.isEqual(modelValue, inpVal)) {
+                    emitModel(inpVal, { type: 'update' });
+                }
             }
         };
         var afterCheckValue = function () {
@@ -933,8 +999,10 @@ export default defineComponent({
         };
         var dateTodayMonthEvent = function (evnt) {
             dateNowHandle();
-            dateChange(reactData.currentDate);
-            hidePanel();
+            if (!props.multiple) {
+                dateChange(reactData.currentDate);
+                hidePanel();
+            }
             inputMethods.dispatchEvent('date-today', { type: props.type }, evnt);
         };
         var dateNextEvent = function (evnt) {
@@ -973,7 +1041,7 @@ export default defineComponent({
             return disabledMethod && disabledMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $input: $xeinput });
         };
         var dateSelectItem = function (date) {
-            var type = props.type;
+            var type = props.type, multiple = props.multiple;
             var datePanelType = reactData.datePanelType;
             if (type === 'month') {
                 if (datePanelType === 'year') {
@@ -982,12 +1050,16 @@ export default defineComponent({
                 }
                 else {
                     dateChange(date);
-                    hidePanel();
+                    if (!multiple) {
+                        hidePanel();
+                    }
                 }
             }
             else if (type === 'year') {
                 dateChange(date);
-                hidePanel();
+                if (!multiple) {
+                    hidePanel();
+                }
             }
             else if (type === 'quarter') {
                 if (datePanelType === 'year') {
@@ -996,7 +1068,9 @@ export default defineComponent({
                 }
                 else {
                     dateChange(date);
-                    hidePanel();
+                    if (!multiple) {
+                        hidePanel();
+                    }
                 }
             }
             else {
@@ -1010,7 +1084,9 @@ export default defineComponent({
                 }
                 else {
                     dateChange(date);
-                    hidePanel();
+                    if (!multiple) {
+                        hidePanel();
+                    }
                 }
             }
         };
@@ -1088,8 +1164,11 @@ export default defineComponent({
             dateTimeChangeEvent(evnt);
         };
         var dateConfirmEvent = function () {
+            var type = props.type;
             var dateValue = computeDateValue.value;
-            dateChange(dateValue || reactData.currentDate);
+            if (type === 'datetime') {
+                dateChange(dateValue || reactData.currentDate);
+            }
             hidePanel();
         };
         var dateMinuteEvent = function (evnt, item) {
@@ -1311,8 +1390,9 @@ export default defineComponent({
                     reactData.visiblePanel = true;
                 }, 10);
                 updateZindex();
-                updatePlacement();
+                return updatePlacement();
             }
+            return nextTick();
         };
         var datePickerOpenEvent = function (evnt) {
             var readonly = props.readonly;
@@ -1488,10 +1568,12 @@ export default defineComponent({
             return label;
         };
         var renderDateDayTable = function () {
+            var multiple = props.multiple;
             var datePanelType = reactData.datePanelType, datePanelValue = reactData.datePanelValue;
             var dateValue = computeDateValue.value;
             var dateHeaders = computeDateHeaders.value;
             var dayDatas = computeDayDatas.value;
+            var dateListValue = computeDateListValue.value;
             var matchFormat = 'yyyyMMdd';
             return [
                 h('table', {
@@ -1514,7 +1596,7 @@ export default defineComponent({
                                     'is--now': item.isNow,
                                     'is--next': item.isNext,
                                     'is--disabled': isDateDisabled(item),
-                                    'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--selected': multiple ? dateListValue.some(function (val) { return XEUtils.isDateSame(val, item.date, matchFormat); }) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                                     'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                 },
                                 onClick: function () { return dateSelectEvent(item); },
@@ -1526,10 +1608,12 @@ export default defineComponent({
             ];
         };
         var renderDateWeekTable = function () {
+            var multiple = props.multiple;
             var datePanelType = reactData.datePanelType, datePanelValue = reactData.datePanelValue;
             var dateValue = computeDateValue.value;
             var weekHeaders = computeWeekHeaders.value;
             var weekDates = computeWeekDates.value;
+            var dateListValue = computeDateListValue.value;
             var matchFormat = 'yyyyMMdd';
             return [
                 h('table', {
@@ -1544,7 +1628,7 @@ export default defineComponent({
                         }))
                     ]),
                     h('tbody', weekDates.map(function (rows) {
-                        var isSelected = rows.some(function (item) { return XEUtils.isDateSame(dateValue, item.date, matchFormat); });
+                        var isSelected = multiple ? rows.some(function (item) { return dateListValue.some(function (val) { return XEUtils.isDateSame(val, item.date, matchFormat); }); }) : rows.some(function (item) { return XEUtils.isDateSame(dateValue, item.date, matchFormat); });
                         var isHover = rows.some(function (item) { return XEUtils.isDateSame(datePanelValue, item.date, matchFormat); });
                         return h('tr', rows.map(function (item) {
                             return h('td', {
@@ -1567,9 +1651,11 @@ export default defineComponent({
             ];
         };
         var renderDateMonthTable = function () {
+            var multiple = props.multiple;
             var datePanelType = reactData.datePanelType, datePanelValue = reactData.datePanelValue;
             var dateValue = computeDateValue.value;
             var monthDatas = computeMonthDatas.value;
+            var dateListValue = computeDateListValue.value;
             var matchFormat = 'yyyyMM';
             return [
                 h('table', {
@@ -1587,7 +1673,7 @@ export default defineComponent({
                                     'is--now': item.isNow,
                                     'is--next': item.isNext,
                                     'is--disabled': isDateDisabled(item),
-                                    'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--selected': multiple ? dateListValue.some(function (val) { return XEUtils.isDateSame(val, item.date, matchFormat); }) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                                     'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                 },
                                 onClick: function () { return dateSelectEvent(item); },
@@ -1599,9 +1685,11 @@ export default defineComponent({
             ];
         };
         var renderDateQuarterTable = function () {
+            var multiple = props.multiple;
             var datePanelType = reactData.datePanelType, datePanelValue = reactData.datePanelValue;
             var dateValue = computeDateValue.value;
             var quarterDatas = computeQuarterDatas.value;
+            var dateListValue = computeDateListValue.value;
             var matchFormat = 'yyyyq';
             return [
                 h('table', {
@@ -1619,7 +1707,7 @@ export default defineComponent({
                                     'is--now': item.isNow,
                                     'is--next': item.isNext,
                                     'is--disabled': isDateDisabled(item),
-                                    'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--selected': multiple ? dateListValue.some(function (val) { return XEUtils.isDateSame(val, item.date, matchFormat); }) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                                     'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                 },
                                 onClick: function () { return dateSelectEvent(item); },
@@ -1631,9 +1719,11 @@ export default defineComponent({
             ];
         };
         var renderDateYearTable = function () {
+            var multiple = props.multiple;
             var datePanelType = reactData.datePanelType, datePanelValue = reactData.datePanelValue;
             var dateValue = computeDateValue.value;
             var yearDatas = computeYearDatas.value;
+            var dateListValue = computeDateListValue.value;
             var matchFormat = 'yyyy';
             return [
                 h('table', {
@@ -1646,10 +1736,12 @@ export default defineComponent({
                         return h('tr', rows.map(function (item) {
                             return h('td', {
                                 class: {
-                                    'is--disabled': isDateDisabled(item),
+                                    'is--prev': item.isPrev,
                                     'is--current': item.isCurrent,
                                     'is--now': item.isNow,
-                                    'is--selected': XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--next': item.isNext,
+                                    'is--disabled': isDateDisabled(item),
+                                    'is--selected': multiple ? dateListValue.some(function (val) { return XEUtils.isDateSame(val, item.date, matchFormat); }) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
                                     'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                                 },
                                 onClick: function () { return dateSelectEvent(item); },
@@ -1675,6 +1767,7 @@ export default defineComponent({
             return renderDateDayTable();
         };
         var renderDatePanel = function () {
+            var multiple = props.multiple;
             var datePanelType = reactData.datePanelType;
             var isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
             var isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
@@ -1723,7 +1816,16 @@ export default defineComponent({
                             h('i', {
                                 class: 'vxe-icon--caret-right'
                             })
-                        ])
+                        ]),
+                        multiple && computeSupportMultiples.value ? h('span', {
+                            class: 'vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn'
+                        }, [
+                            h('button', {
+                                class: 'vxe-input--date-picker-confirm',
+                                type: 'button',
+                                onClick: dateConfirmEvent
+                            }, GlobalConfig.i18n('vxe.button.confirm'))
+                        ]) : null
                     ])
                 ]),
                 h('div', {
@@ -1983,7 +2085,10 @@ export default defineComponent({
                 inputElem.blur();
                 reactData.isActivated = false;
                 return nextTick();
-            }
+            },
+            showPanel: showPanel,
+            hidePanel: hidePanel,
+            updatePlacement: updatePlacement
         };
         Object.assign($xeinput, inputMethods);
         watch(function () { return props.modelValue; }, function (val) {
@@ -2007,7 +2112,7 @@ export default defineComponent({
             var isDatePickerType = computeIsDatePickerType.value;
             if (isDatePickerType) {
                 dateParseValue(reactData.datePanelValue);
-                reactData.inputValue = reactData.datePanelLabel;
+                reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
             }
         });
         nextTick(function () {

package/es/input/style.css

@@ -271,7 +271,10 @@
 .vxe-input--time-picker-confirm {
   position: absolute;
   right: 0;
-  top: 0;
+  top: 0; }
+
+.vxe-input--time-picker-confirm,
+.vxe-input--date-picker-confirm {
   outline: 0;
   border: 1px solid #dcdfe6;
   border-radius: 4px;
@@ -279,10 +282,12 @@
   color: #fff;
   border-color: #409eff;
   background-color: #409eff; }
-  .vxe-input--time-picker-confirm:hover {
+  .vxe-input--time-picker-confirm:hover,
+  .vxe-input--date-picker-confirm:hover {
     background-color: #5faeff;
     border-color: #5faeff; }
-  .vxe-input--time-picker-confirm:active {
+  .vxe-input--time-picker-confirm:active,
+  .vxe-input--date-picker-confirm:active {
     background-color: #3196ff;
     border-color: #3196ff; }
 
@@ -316,8 +321,6 @@
 .vxe-input--date-picker-btn {
   display: inline-block;
   display: flex;
-  border-radius: 4px;
-  border: 1px solid #dcdfe6;
   align-items: center;
   justify-content: center;
   background-color: #fff; }
@@ -370,6 +373,8 @@
   .vxe-input--date-picker-body td.is--selected {
     color: #fff;
     background-color: #409eff; }
+    .vxe-input--date-picker-body td.is--selected.is--prev, .vxe-input--date-picker-body td.is--selected.is--next {
+      background-color: #73b8ff; }
     .vxe-input--date-picker-body td.is--selected .vxe-input--date-label,
     .vxe-input--date-picker-body td.is--selected .vxe-input--date-festival {
       color: #fff; }
@@ -558,8 +563,13 @@
     height: 30px;
     line-height: 30px; }
   .vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
-    width: 30px;
     margin-left: 8px; }
+  .vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn,
+  .vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
+  .vxe-input--panel .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
+    width: 30px;
+    border-radius: 4px;
+    border: 1px solid #dcdfe6; }
   .vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
   .vxe-input--panel .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
     padding: 0 9px; }
@@ -590,7 +600,8 @@
     height: 48px; }
   .vxe-input--panel .vxe-input--date-picker-body th {
     height: 30px; }
-  .vxe-input--panel .vxe-input--time-picker-confirm {
+  .vxe-input--panel .vxe-input--time-picker-confirm,
+  .vxe-input--panel .vxe-input--date-picker-confirm {
     height: 30px;
     padding: 0 9px; }
   .vxe-input--panel .vxe-input--date-label {
@@ -621,8 +632,13 @@
       height: 29px;
       line-height: 29px; }
     .vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
-      width: 29px;
       margin-left: 7px; }
+    .vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn,
+    .vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
+    .vxe-input--panel.size--medium .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
+      width: 29px;
+      border-radius: 4px;
+      border: 1px solid #dcdfe6; }
     .vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
     .vxe-input--panel.size--medium .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
       padding: 0 8px; }
@@ -653,7 +669,8 @@
       height: 46px; }
     .vxe-input--panel.size--medium .vxe-input--date-picker-body th {
       height: 29px; }
-    .vxe-input--panel.size--medium .vxe-input--time-picker-confirm {
+    .vxe-input--panel.size--medium .vxe-input--time-picker-confirm,
+    .vxe-input--panel.size--medium .vxe-input--date-picker-confirm {
       height: 29px;
       padding: 0 8px; }
     .vxe-input--panel.size--medium .vxe-input--date-label {
@@ -684,8 +701,13 @@
       height: 28px;
       line-height: 28px; }
     .vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
-      width: 28px;
       margin-left: 6px; }
+    .vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn,
+    .vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
+    .vxe-input--panel.size--small .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
+      width: 28px;
+      border-radius: 4px;
+      border: 1px solid #dcdfe6; }
     .vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
     .vxe-input--panel.size--small .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
       padding: 0 7px; }
@@ -716,7 +738,8 @@
       height: 44px; }
     .vxe-input--panel.size--small .vxe-input--date-picker-body th {
       height: 28px; }
-    .vxe-input--panel.size--small .vxe-input--time-picker-confirm {
+    .vxe-input--panel.size--small .vxe-input--time-picker-confirm,
+    .vxe-input--panel.size--small .vxe-input--date-picker-confirm {
       height: 28px;
       padding: 0 7px; }
     .vxe-input--panel.size--small .vxe-input--date-label {
@@ -747,8 +770,13 @@
       height: 27px;
       line-height: 27px; }
     .vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-btn {
-      width: 27px;
       margin-left: 5px; }
+    .vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-prev-btn,
+    .vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-current-btn,
+    .vxe-input--panel.size--mini .vxe-input--date-picker-btn-wrapper .vxe-input--date-picker-next-btn {
+      width: 27px;
+      border-radius: 4px;
+      border: 1px solid #dcdfe6; }
     .vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-label,
     .vxe-input--panel.size--mini .vxe-input--date-picker-type-wrapper .vxe-input--date-picker-btn {
       padding: 0 6px; }
@@ -779,7 +807,8 @@
       height: 42px; }
     .vxe-input--panel.size--mini .vxe-input--date-picker-body th {
       height: 26px; }
-    .vxe-input--panel.size--mini .vxe-input--time-picker-confirm {
+    .vxe-input--panel.size--mini .vxe-input--time-picker-confirm,
+    .vxe-input--panel.size--mini .vxe-input--date-picker-confirm {
       height: 27px;
       padding: 0 6px; }
     .vxe-input--panel.size--mini .vxe-input--date-label {

package/es/keyboard/src/hook.js

@@ -62,7 +62,11 @@ var tableKeyboardHook = {
                 var elemStore = internalData.elemStore;
                 var disX_1 = evnt.clientX;
                 var disY_1 = evnt.clientY;
-                var bodyWrapperElem_1 = elemStore[(column.fixed || 'main') + "-body-wrapper"] || elemStore['main-body-wrapper'];
+                var bodyWrapperRef = elemStore[(column.fixed || 'main') + "-body-wrapper"] || elemStore['main-body-wrapper'];
+                var bodyWrapperElem_1 = bodyWrapperRef ? bodyWrapperRef.value : null;
+                if (!bodyWrapperElem_1) {
+                    return;
+                }
                 var checkboxRangeElem_1 = bodyWrapperElem_1.querySelector('.vxe-table--checkbox-range');
                 var domMousemove_1 = document.onmousemove;
                 var domMouseup_1 = document.onmouseup;