vxe-table 4.1.2 → 4.1.5

package/es/table/src/cell.js

@@ -309,17 +309,18 @@ export var Cell = {
         var selectRow = reactData.selectRow;
         var radioOpts = computeRadioOpts.value;
         var slots = column.slots;
-        var labelField = radioOpts.labelField, checkMethod = radioOpts.checkMethod;
+        var labelField = radioOpts.labelField, checkMethod = radioOpts.checkMethod, visibleMethod = radioOpts.visibleMethod;
         var row = params.row;
         var defaultSlot = slots ? slots.default : null;
         var radioSlot = slots ? slots.radio : null;
         var isChecked = row === selectRow;
+        var isVisible = !visibleMethod || visibleMethod({ row: row });
         var isDisabled = !!checkMethod;
         var ons;
         if (!isHidden) {
             ons = {
                 onClick: function (evnt) {
-                    if (!isDisabled) {
+                    if (!isDisabled && isVisible) {
                         $table.triggerRadioRowEvent(evnt, params);
                     }
                 }
@@ -328,23 +329,28 @@ export var Cell = {
                 isDisabled = !checkMethod({ row: row });
             }
         }
-        var radioParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled });
-        return radioSlot ? $table.callSlot(radioSlot, radioParams) : [
+        var radioParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible });
+        if (radioSlot) {
+            return $table.callSlot(radioSlot, radioParams);
+        }
+        var radioVNs = [];
+        if (isVisible) {
+            radioVNs.push(h('span', {
+                class: 'vxe-radio--icon vxe-radio--checked-icon'
+            }), h('span', {
+                class: 'vxe-radio--icon vxe-radio--unchecked-icon'
+            }));
+        }
+        if (defaultSlot || labelField) {
+            radioVNs.push(h('span', {
+                class: 'vxe-radio--label'
+            }, defaultSlot ? $table.callSlot(defaultSlot, radioParams) : XEUtils.get(row, labelField)));
+        }
+        return [
             h('span', __assign({ class: ['vxe-cell--radio', {
                         'is--checked': isChecked,
                         'is--disabled': isDisabled
-                    }] }, ons), [
-                h('span', {
-                    class: 'vxe-radio--icon vxe-radio--checked-icon'
-                }),
-                h('span', {
-                    class: 'vxe-radio--icon vxe-radio--unchecked-icon'
-                })
-            ].concat(defaultSlot || labelField ? [
-                h('span', {
-                    class: 'vxe-radio--label'
-                }, defaultSlot ? $table.callSlot(defaultSlot, radioParams) : XEUtils.get(row, labelField))
-            ] : []))
+                    }] }, ons), radioVNs)
         ];
     },
     renderTreeRadioCell: function (params) {
@@ -416,19 +422,20 @@ export var Cell = {
         var selection = reactData.selection, treeIndeterminates = reactData.treeIndeterminates;
         var computeCheckboxOpts = $table.getComputeMaps().computeCheckboxOpts;
         var checkboxOpts = computeCheckboxOpts.value;
-        var labelField = checkboxOpts.labelField, checkMethod = checkboxOpts.checkMethod;
+        var labelField = checkboxOpts.labelField, checkMethod = checkboxOpts.checkMethod, visibleMethod = checkboxOpts.visibleMethod;
         var slots = column.slots;
         var defaultSlot = slots ? slots.default : null;
         var checkboxSlot = slots ? slots.checkbox : null;
         var indeterminate = false;
         var isChecked = false;
+        var isVisible = !visibleMethod || visibleMethod({ row: row });
         var isDisabled = !!checkMethod;
         var ons;
         if (!isHidden) {
             isChecked = $table.findRowIndexOf(selection, row) > -1;
             ons = {
                 onClick: function (evnt) {
-                    if (!isDisabled) {
+                    if (!isDisabled && isVisible) {
                         $table.triggerCheckRowEvent(evnt, params, !isChecked);
                     }
                 }
@@ -440,27 +447,31 @@ export var Cell = {
                 indeterminate = $table.findRowIndexOf(treeIndeterminates, row) > -1;
             }
         }
-        var checkboxParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, indeterminate: indeterminate });
-        return checkboxSlot ? $table.callSlot(checkboxSlot, checkboxParams) : [
+        var checkboxParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: indeterminate });
+        if (checkboxSlot) {
+            return $table.callSlot(checkboxSlot, checkboxParams);
+        }
+        var checkVNs = [];
+        if (isVisible) {
+            checkVNs.push(h('span', {
+                class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
+            }), h('span', {
+                class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
+            }), h('span', {
+                class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
+            }));
+        }
+        if (defaultSlot || labelField) {
+            checkVNs.push(h('span', {
+                class: 'vxe-checkbox--label'
+            }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField)));
+        }
+        return [
             h('span', __assign({ class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
                         'is--disabled': isDisabled,
                         'is--indeterminate': indeterminate
-                    }] }, ons), [
-                h('span', {
-                    class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
-                }),
-                h('span', {
-                    class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
-                }),
-                h('span', {
-                    class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
-                })
-            ].concat(defaultSlot || labelField ? [
-                h('span', {
-                    class: 'vxe-checkbox--label'
-                }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField))
-            ] : []))
+                    }] }, ons), checkVNs)
         ];
     },
     renderTreeSelectionCell: function (params) {
@@ -473,19 +484,20 @@ export var Cell = {
         var treeIndeterminates = reactData.treeIndeterminates;
         var computeCheckboxOpts = $table.getComputeMaps().computeCheckboxOpts;
         var checkboxOpts = computeCheckboxOpts.value;
-        var labelField = checkboxOpts.labelField, property = checkboxOpts.checkField, halfField = checkboxOpts.halfField, checkMethod = checkboxOpts.checkMethod;
+        var labelField = checkboxOpts.labelField, property = checkboxOpts.checkField, halfField = checkboxOpts.halfField, checkMethod = checkboxOpts.checkMethod, visibleMethod = checkboxOpts.visibleMethod;
         var slots = column.slots;
         var defaultSlot = slots ? slots.default : null;
         var checkboxSlot = slots ? slots.checkbox : null;
         var indeterminate = false;
         var isChecked = false;
+        var isVisible = !visibleMethod || visibleMethod({ row: row });
         var isDisabled = !!checkMethod;
         var ons;
         if (!isHidden) {
             isChecked = XEUtils.get(row, property);
             ons = {
                 onClick: function (evnt) {
-                    if (!isDisabled) {
+                    if (!isDisabled && isVisible) {
                         $table.triggerCheckRowEvent(evnt, params, !isChecked);
                     }
                 }
@@ -497,27 +509,31 @@ export var Cell = {
                 indeterminate = $table.findRowIndexOf(treeIndeterminates, row) > -1;
             }
         }
-        var checkboxParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, indeterminate: indeterminate });
-        return checkboxSlot ? $table.callSlot(checkboxSlot, checkboxParams) : [
+        var checkboxParams = __assign(__assign({}, params), { checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate: indeterminate });
+        if (checkboxSlot) {
+            return $table.callSlot(checkboxSlot, checkboxParams);
+        }
+        var checkVNs = [];
+        if (isVisible) {
+            checkVNs.push(h('span', {
+                class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
+            }), h('span', {
+                class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
+            }), h('span', {
+                class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
+            }));
+            if (defaultSlot || labelField) {
+                checkVNs.push(h('span', {
+                    class: 'vxe-checkbox--label'
+                }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField)));
+            }
+        }
+        return [
             h('span', __assign({ class: ['vxe-cell--checkbox', {
                         'is--checked': isChecked,
                         'is--disabled': isDisabled,
                         'is--indeterminate': halfField && !isChecked ? row[halfField] : indeterminate
-                    }] }, ons), [
-                h('span', {
-                    class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
-                }),
-                h('span', {
-                    class: 'vxe-checkbox--icon vxe-checkbox--unchecked-icon'
-                }),
-                h('span', {
-                    class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
-                })
-            ].concat(defaultSlot || labelField ? [
-                h('span', {
-                    class: 'vxe-checkbox--label'
-                }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField))
-            ] : []))
+                    }] }, ons), checkVNs)
         ];
     },
     renderTreeSelectionCellByProp: function (params) {

package/es/table/src/table.js

@@ -1762,11 +1762,11 @@ export default defineComponent({
                 if (transform) {
                     // 树结构自动转换
                     if (process.env.NODE_ENV === 'development') {
-                        if (!treeOpts.rowtKey) {
-                            errLog('vxe.error.reqProp', ['tree-config.rowtKey']);
+                        if (!treeOpts.rowField) {
+                            errLog('vxe.error.reqProp', ['tree-config.rowField']);
                         }
-                        if (!treeOpts.parentKey) {
-                            errLog('vxe.error.reqProp', ['tree-config.parentKey']);
+                        if (!treeOpts.parentField) {
+                            errLog('vxe.error.reqProp', ['tree-config.parentField']);
                         }
                         if (!treeOpts.children) {
                             errLog('vxe.error.reqProp', ['tree-config.children']);
@@ -1777,7 +1777,7 @@ export default defineComponent({
                             }
                         });
                     }
-                    treeData = XEUtils.toArrayTree(fullData, { key: treeOpts.rowtKey, parentKey: treeOpts.parentKey, children: treeOpts.children });
+                    treeData = XEUtils.toArrayTree(fullData, { key: treeOpts.rowField, parentKey: treeOpts.parentField, children: treeOpts.children });
                     fullData = treeData.slice(0);
                 }
                 else {
@@ -2072,8 +2072,10 @@ export default defineComponent({
             var treeFullData = internalData.treeFullData;
             var treeOpts = computeTreeOpts.value;
             var fullData = [];
+            var expandMaps = new Map();
             XEUtils.eachTree(treeFullData, function (row, index, items, path, parent) {
-                if (!parent || $xetable.findRowIndexOf(treeExpandeds, parent) > -1) {
+                if (!parent || (expandMaps.has(parent) && $xetable.findRowIndexOf(treeExpandeds, parent) > -1)) {
+                    expandMaps.set(row, 1);
                     fullData.push(row);
                 }
             }, treeOpts);
@@ -2258,18 +2260,13 @@ export default defineComponent({
                     var oRow = tableSourceData[rowIndex];
                     if (oRow && row) {
                         if (field) {
-                            XEUtils.set(oRow, field, XEUtils.get(record || row, field));
+                            var newValue = XEUtils.get(record || row, field);
+                            XEUtils.set(row, field, newValue);
+                            XEUtils.set(oRow, field, newValue);
                         }
                         else {
-                            if (record) {
-                                tableSourceData[rowIndex] = record;
-                                XEUtils.clear(row, undefined);
-                                Object.assign(row, tablePrivateMethods.defineField(Object.assign({}, record)));
-                                tablePrivateMethods.cacheRowMap(true);
-                            }
-                            else {
-                                XEUtils.destructuring(oRow, XEUtils.clone(row, true));
-                            }
+                            var newRecord = XEUtils.clone(__assign({}, record), true);
+                            XEUtils.destructuring(oRow, Object.assign(row, newRecord));
                         }
                     }
                     reactData.tableData = tableData.slice(0);
@@ -2289,8 +2286,8 @@ export default defineComponent({
                 var tableSourceData = internalData.tableSourceData, fullDataRowIdData = internalData.fullDataRowIdData, fullAllDataRowIdData = internalData.fullAllDataRowIdData;
                 var treeOpts = computeTreeOpts.value;
                 var children = treeOpts.children;
-                var rest = fullAllDataRowIdData[getRowid($xetable, row)];
-                var parentLevel = rest ? rest.level : 0;
+                var parentRest = fullAllDataRowIdData[getRowid($xetable, row)];
+                var parentLevel = parentRest ? parentRest.level : 0;
                 return tableMethods.createData(childRecords).then(function (rows) {
                     if (keepSource) {
                         var rowid_1 = getRowid($xetable, row);
@@ -3124,11 +3121,12 @@ export default defineComponent({
              * @param {Row} row 行对象
              */
             setCurrentRow: function (row) {
+                var rowOpts = computeRowOpts.value;
                 var el = refElem.value;
                 tableMethods.clearCurrentRow();
                 tableMethods.clearCurrentColumn();
                 reactData.currentRow = row;
-                if (props.highlightCurrentRow) {
+                if (rowOpts.isCurrent || props.highlightCurrentRow) {
                     if (el) {
                         XEUtils.arrayEach(el.querySelectorAll("[rowid=\"" + getRowid($xetable, row) + "\"]"), function (elem) { return addClass(elem, 'row--current'); });
                     }
@@ -3174,7 +3172,8 @@ export default defineComponent({
              * 用于当前行，获取当前行的数据
              */
             getCurrentRecord: function () {
-                return props.highlightCurrentRow ? reactData.currentRow : null;
+                var rowOpts = computeRowOpts.value;
+                return rowOpts.isCurrent || props.highlightCurrentRow ? reactData.currentRow : null;
             },
             /**
              * 用于单选行，获取当已选中的数据
@@ -3209,7 +3208,8 @@ export default defineComponent({
                 return null;
             },
             getCurrentColumn: function () {
-                return props.highlightCurrentColumn ? reactData.currentColumn : null;
+                var columnOpts = computeColumnOpts.value;
+                return columnOpts.isCurrent || props.highlightCurrentColumn ? reactData.currentColumn : null;
             },
             /**
              * 用于当前列，设置某列行为高亮状态
@@ -4012,6 +4012,7 @@ export default defineComponent({
                     var editOpts = computeEditOpts.value;
                     var treeOpts = computeTreeOpts.value;
                     var menuList = computeMenuList.value;
+                    var rowOpts = computeRowOpts.value;
                     var selected = editStore.selected, actived = editStore.actived;
                     var keyCode = evnt.keyCode;
                     var isEsc = hasEventKey(evnt, EVENT_KEYS.ESCAPE);
@@ -4092,7 +4093,7 @@ export default defineComponent({
                             internalData._keyCtx = false;
                         }, 1000);
                     }
-                    else if (isEnter && !isAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && highlightCurrentRow && currentRow))) {
+                    else if (isEnter && !isAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
                         // 退出选中
                         if (hasCtrlKey) {
                             // 如果是激活编辑状态，则取消编辑
@@ -4126,7 +4127,7 @@ export default defineComponent({
                                     }
                                 }
                             }
-                            else if (treeConfig && highlightCurrentRow && currentRow) {
+                            else if (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
                                 // 如果是树形表格当前行回车移动到子节点
                                 var childrens = currentRow[treeOpts.children];
                                 if (childrens && childrens.length) {
@@ -4151,7 +4152,7 @@ export default defineComponent({
                             if (selected.row && selected.column) {
                                 $xetable.moveSelected(selected.args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt);
                             }
-                            else if ((isUpArrow || isDwArrow) && highlightCurrentRow) {
+                            else if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
                                 // 当前行按键上下移动
                                 $xetable.moveCurrentRow(isUpArrow, isDwArrow, evnt);
                             }
@@ -4166,7 +4167,7 @@ export default defineComponent({
                             $xetable.moveTabSelected(actived.args, hasShiftKey, evnt);
                         }
                     }
-                    else if (keyboardConfig && isEnableConf(editConfig) && (isDel || (treeConfig && highlightCurrentRow && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
+                    else if (keyboardConfig && isEnableConf(editConfig) && (isDel || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
                         if (!isEditStatus) {
                             var delMethod = keyboardOpts.delMethod, backMethod = keyboardOpts.backMethod;
                             // 如果是删除键
@@ -4202,7 +4203,7 @@ export default defineComponent({
                                     tableMethods.updateFooter();
                                 }
                             }
-                            else if (isBack && keyboardOpts.isArrow && treeConfig && highlightCurrentRow && currentRow) {
+                            else if (isBack && keyboardOpts.isArrow && treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
                                 // 如果树形表格回退键关闭当前行返回父节点
                                 var parentRow_1 = XEUtils.findTree(internalData.afterFullData, function (item) { return item === currentRow; }, treeOpts).parent;
                                 if (parentRow_1) {
@@ -4843,6 +4844,7 @@ export default defineComponent({
             triggerHeaderCellClickEvent: function (evnt, params) {
                 var _lastResizeTime = internalData._lastResizeTime;
                 var sortOpts = computeSortOpts.value;
+                var columnOpts = computeColumnOpts.value;
                 var column = params.column;
                 var cell = evnt.currentTarget;
                 var triggerResizable = _lastResizeTime && _lastResizeTime > Date.now() - 300;
@@ -4852,7 +4854,7 @@ export default defineComponent({
                     tablePrivateMethods.triggerSortEvent(evnt, column, getNextSortOrder(column));
                 }
                 tableMethods.dispatchEvent('header-cell-click', Object.assign({ triggerResizable: triggerResizable, triggerSort: triggerSort, triggerFilter: triggerFilter, cell: cell }, params), evnt);
-                if (props.highlightCurrentColumn) {
+                if (columnOpts.isCurrent || props.highlightCurrentColumn) {
                     tableMethods.setCurrentColumn(column);
                 }
             },
@@ -4872,6 +4874,7 @@ export default defineComponent({
                 var treeOpts = computeTreeOpts.value;
                 var radioOpts = computeRadioOpts.value;
                 var checkboxOpts = computeCheckboxOpts.value;
+                var rowOpts = computeRowOpts.value;
                 var actived = editStore.actived;
                 var row = params.row, column = params.column;
                 var type = column.type, treeNode = column.treeNode;
@@ -4898,7 +4901,7 @@ export default defineComponent({
                 if (!triggerTreeNode) {
                     if (!triggerExpandNode) {
                         // 如果是高亮行
-                        if (highlightCurrentRow) {
+                        if (rowOpts.isCurrent || highlightCurrentRow) {
                             if (!triggerCheckbox && !triggerRadio) {
                                 tablePrivateMethods.triggerCurrentRowEvent(evnt, params);
                             }
@@ -5212,6 +5215,7 @@ export default defineComponent({
                 tablePrivateMethods.handleTableData();
                 tablePrivateMethods.updateScrollYSpace();
             },
+            updateVirtualTreeData: updateVirtualTreeData,
             /**
              * 处理固定列的显示状态
              */
@@ -5679,6 +5683,8 @@ export default defineComponent({
             var leftList = columnStore.leftList, rightList = columnStore.rightList;
             var tooltipOpts = computeTooltipOpts.value;
             var treeOpts = computeTreeOpts.value;
+            var rowOpts = computeRowOpts.value;
+            var columnOpts = computeColumnOpts.value;
             var vSize = computeSize.value;
             var tableBorder = computeTableBorder.value;
             var mouseOpts = computeMouseOpts.value;
@@ -5693,8 +5699,8 @@ export default defineComponent({
                         _a['cell--highlight'] = highlightCell,
                         _a['cell--selected'] = mouseConfig && mouseOpts.selected,
                         _a['cell--area'] = mouseConfig && mouseOpts.area,
-                        _a['row--highlight'] = highlightHoverRow,
-                        _a['column--highlight'] = highlightHoverColumn,
+                        _a['row--highlight'] = rowOpts.isHover || highlightHoverRow,
+                        _a['column--highlight'] = columnOpts.isHover || highlightHoverColumn,
                         _a['is--header'] = showHeader,
                         _a['is--footer'] = showFooter,
                         _a['is--group'] = isGroup,

package/es/v-x-e-table/src/conf.js

@@ -62,8 +62,8 @@ var GlobalConfig = {
             showIcon: true
         },
         treeConfig: {
-            rowtKey: 'id',
-            parentKey: 'parentId',
+            rowField: 'id',
+            parentField: 'parentId',
             children: 'children',
             hasChild: 'hasChild',
             indent: 20,