vxe-table 4.5.0-beta.9 → 4.5.1

package/README.en.md

@@ -12,7 +12,7 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-A [vue](https://www.npmjs.com/package/vue) based PC form component, support add, delete, change, virtual list, virtual tree, lazy load, shortcut menu, data validation, print export, form rendering, data paging, modal window, custom template, renderer, flexible configuration items, etc...
+A [vue](https://www.npmjs.com/package/vue) based PC form component, support add, delete, change, virtual list, virtual tree, lazy load, shortcut menu, data validation, print export, form rendering, data paging, modal window, custom template, renderer, JSON configuration designed for zero code...
 
 * Design concept
   * Efficient and concise API design for modern browsers.
@@ -20,10 +20,10 @@ A [vue](https://www.npmjs.com/package/vue) based PC form component, support add,
   * Designed for single row table editing, supports addition, deletion, modification and query as well as more expansion, with powerful functions and performance at the same time.
 
 * Plan
-  * [x] ~~v1.0 Based on vue2.6+, Support for all major browsers.~~
-  * [x] ~~v2.0 Based on vue2.6+, Support for all major browsers.~~
-  * [x] v3.0 Based on vue2.6+, supports modern browsers and retains compatibility with IE11.
-  * [x] v4.0 Based on vue3.2+, Only support modern browser, not IE.
+  * [x] ~~v1.0 Based on vue2.6 < 3, Support for all major browsers.~~
+  * [x] ~~v2.0 Based on vue2.6 < 3, Support for all major browsers.~~
+  * [x] v3.0 Based on vue2.6 < 3, supports modern browsers and retains compatibility with IE11.
+  * [x] v4.0 Based on vue3.2 < 4, Only support modern browser, not IE.
 
 ## Browser Support
 
@@ -34,12 +34,14 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 ## Features
 
 * [x] Basic table
-* [x] Grid
+* [x] Configuration grid
+* [x] Base form
+* [x] Configuration form
 * [x] Striped
 * [x] Table with border
 * [x] Cell style
 * [x] Column resizing
-* [x] Maximum table height
+* [x] Minimum/maximum height
 * [x] Resize height & width
 * [x] Fixed column
 * [x] Grouping table header
@@ -63,7 +65,6 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 * [x] Context menu
 * [x] Detail - Expandable row
 * [x] Pager
-* [x] Form
 * [x] Toolbar
 * [x] Pulldown
 * [x] Virtual list

package/README.md

@@ -12,7 +12,7 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项等...  
+一个基于 [vue](https://www.npmjs.com/package/vue) 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式为零代码而设计...  
 
 * 设计理念
   * 面向现代浏览器，高效的简洁 API 设计
@@ -20,16 +20,12 @@
   * 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能
 
 * 计划
-  * [x] ~~v1.0 基于 vue2.6+，支持所有主流的浏览器，实现表格的一切实用的功能~~
-  * [x] ~~v2.0 基于 vue2.6+，支持所有主流的浏览器，同时兼具功能与性能~~
-  * [x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11
-  * [x] v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE
+  * [x] ~~v1.0 基于 vue2.6 < 3，支持所有主流的浏览器，实现表格的一切实用的功能~~
+  * [x] ~~v2.0 基于 vue2.6 < 3，支持所有主流的浏览器，同时兼具功能与性能~~
+  * [x] v3.0 基于 vue2.6 < 3，支持现代浏览器并保留兼容 IE11
+  * [x] v4.0 基于 vue3.2 < 4，只支持现代浏览器，不支持 IE
   * [ ] 下一阶段：sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化
 
-## QQ 交流群
-
-![qq](https://vxetable.cn/static/donation/qq.png)
-
 ## 浏览器支持
 
 ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png)
@@ -39,12 +35,14 @@
 ## 功能点
 
 * [x] 基础表格
-* [x] 高级表格
+* [x] 配置式表格
+* [x] 基础表单
+* [x] 配置式表单
 * [x] 斑马线条纹
 * [x] 多种边框
 * [x] 单元格样式
 * [x] 列宽拖动
-* [x] 最大高度
+* [x] 最小/最大高度
 * [x] 自适应宽高
 * [x] 固定列
 * [x] 多级表头
@@ -68,7 +66,6 @@
 * [x] 快捷菜单
 * [x] 展开行
 * [x] 分页
-* [x] 表单
 * [x] 工具栏
 * [x] 下拉容器
 * [x] 虚拟列表
@@ -155,6 +152,12 @@ const tableData = ref([
 
 💡 [官网文档源码](https://github.com/x-extends/vxe-table-docs)
 
+## QQ 交流群
+
+该群供大家交流問題，如果群人数已满，将会不定期剔除不活跃的。  
+
+![qq](https://vxetable.cn/static/donation/qq.png)
+
 ## 运行项目
 
 安装依赖

package/README.zh-TW.md

@@ -12,7 +12,7 @@
 [![pull requests closed](https://img.shields.io/github/issues-pr-closed/x-extends/vxe-table.svg)](https://github.com/x-extends/vxe-table/pulls?q=is%3Apr+is%3Aclosed)
 [![npm license](https://img.shields.io/github/license/mashape/apistatus.svg)](LICENSE)
 
-一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件，支持增删改查、虛擬清單、虛擬樹、懶加載、快捷選單、數據校驗、列印匯出、表單渲染、數據分頁、彈窗、自定義範本、渲染器、賊靈活的配寘項等…
+一個基於 [vue](https://www.npmjs.com/package/vue) 的PC端表格組件，支持增删改查、虛擬清單、虛擬樹、懶加載、快捷選單、數據校驗、列印匯出、表單渲染、數據分頁、彈窗、自定義範本、渲染器、JSON 配置式爲零代碼而設計…
 
 * 設計理念
   * 面向現代瀏覽器，高效的簡潔 API 設計
@@ -20,10 +20,10 @@
   * 為單行編輯表格而設計，支持增删改查及更多擴展，强大的功能的同時兼具效能
 
 * 計劃
-  * [x] ~~v1.0 基於 vue2.6+，支持所有主流的瀏覽器，實現表格的一切實用的功能~~
-  * [x] ~~v2.0 基於 vue2.6+，支持所有主流的瀏覽器，同時兼具功能與效能~~
-  * [x] v3.0 基於 vue2.6+，支持現代瀏覽器並保留相容IE11
-  * [x] v4.0 基于 vue3.2+，只支持現代瀏覽器，不支持IE
+  * [x] ~~v1.0 基於 vue2.6 < 3，支持所有主流的瀏覽器，實現表格的一切實用的功能~~
+  * [x] ~~v2.0 基於 vue2.6 < 3，支持所有主流的瀏覽器，同時兼具功能與效能~~
+  * [x] v3.0 基於 vue2.6 < 3，支持現代瀏覽器並保留相容IE11
+  * [x] v4.0 基于 vue3.2 < 4，只支持現代瀏覽器，不支持IE
 
 ## 瀏覽器支持
 
@@ -34,12 +34,14 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 ## 功能點
 
 * [x] 基礎表格
-* [x] 高級表格
+* [x] 配置式表格
+* [x] 基礎表單
+* [x] 配置式表單
 * [x] 斑馬線條紋
 * [x] 多種邊框
 * [x] 儲存格樣式
 * [x] 列寬拖動
-* [x] 最大高度
+* [x] 最小/最大高度
 * [x] 自我調整寬高
 * [x] 固定列
 * [x] 多級表頭
@@ -63,7 +65,6 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 * [x] 快捷選單
 * [x] 展開行
 * [x] 分頁
-* [x] 表單
 * [x] 工具列
 * [x] 下拉容器
 * [x] 虛擬清單

package/es/edit/src/hook.js

@@ -20,6 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { nextTick } from 'vue';
 import XEUtils from 'xe-utils';
+import GlobalConfig from '../../v-x-e-table/src/conf';
 import { renderer } from '../../v-x-e-table';
 import { isEnableConf } from '../../tools/utils';
 import { getCellValue, setCellValue, getRowid } from '../../table/src/util';
@@ -74,19 +75,20 @@ var editHook = {
         function insertTreeRow(newRecords, isAppend) {
             var tableFullTreeData = internalData.tableFullTreeData, afterFullData = internalData.afterFullData, fullDataRowIdData = internalData.fullDataRowIdData, fullAllDataRowIdData = internalData.fullAllDataRowIdData;
             var treeOpts = computeTreeOpts.value;
-            var rowField = treeOpts.rowField, parentField = treeOpts.parentField, children = treeOpts.children, mapChildren = treeOpts.mapChildren;
+            var rowField = treeOpts.rowField, parentField = treeOpts.parentField, mapChildrenField = treeOpts.mapChildrenField;
+            var childrenField = treeOpts.children || treeOpts.childrenField;
             var funcName = isAppend ? 'push' : 'unshift';
             newRecords.forEach(function (item) {
                 var parentRowId = item[parentField];
                 var rowid = getRowid($xetable, item);
-                var matchObj = parentRowId ? XEUtils.findTree(tableFullTreeData, function (item) { return parentRowId === item[rowField]; }, { children: mapChildren }) : null;
+                var matchObj = parentRowId ? XEUtils.findTree(tableFullTreeData, function (item) { return parentRowId === item[rowField]; }, { children: mapChildrenField }) : null;
                 if (matchObj) {
                     var parentRow = matchObj.item;
                     var parentRest = fullAllDataRowIdData[getRowid($xetable, parentRow)];
                     var parentLevel = parentRest ? parentRest.level : 0;
-                    var parentChilds = parentRow[children];
+                    var parentChilds = parentRow[childrenField];
                     if (!XEUtils.isArray(parentChilds)) {
-                        parentChilds = parentRow[children] = [];
+                        parentChilds = parentRow[childrenField] = [];
                     }
                     parentChilds[funcName](item);
                     var rest = { row: item, rowid: rowid, seq: -1, index: -1, _index: -1, $index: -1, items: parentChilds, parent: parent, level: parentLevel + 1 };
@@ -129,7 +131,7 @@ var editHook = {
                 var mergeList = reactData.mergeList, editStore = reactData.editStore;
                 var tableFullTreeData = internalData.tableFullTreeData, afterFullData = internalData.afterFullData, tableFullData = internalData.tableFullData, fullDataRowIdData = internalData.fullDataRowIdData, fullAllDataRowIdData = internalData.fullAllDataRowIdData;
                 var treeOpts = computeTreeOpts.value;
-                var transform = treeOpts.transform, rowField = treeOpts.rowField, mapChildren = treeOpts.mapChildren;
+                var transform = treeOpts.transform, rowField = treeOpts.rowField, mapChildrenField = treeOpts.mapChildrenField;
                 if (!XEUtils.isArray(records)) {
                     records = [records];
                 }
@@ -172,7 +174,7 @@ var editHook = {
                     else {
                         // 如果为虚拟树
                         if (treeConfig && transform) {
-                            var matchObj_1 = XEUtils.findTree(tableFullTreeData, function (item) { return row[rowField] === item[rowField]; }, { children: mapChildren });
+                            var matchObj_1 = XEUtils.findTree(tableFullTreeData, function (item) { return row[rowField] === item[rowField]; }, { children: mapChildrenField });
                             if (matchObj_1) {
                                 var parentRow_1 = matchObj_1.parent;
                                 var parentChilds_1 = matchObj_1.items;
@@ -269,7 +271,7 @@ var editHook = {
              */
             remove: function (rows) {
                 var treeConfig = props.treeConfig;
-                var mergeList = reactData.mergeList, editStore = reactData.editStore, selectCheckboxRows = reactData.selectCheckboxRows;
+                var mergeList = reactData.mergeList, editStore = reactData.editStore, selectCheckboxMaps = reactData.selectCheckboxMaps;
                 var tableFullTreeData = internalData.tableFullTreeData, afterFullData = internalData.afterFullData, tableFullData = internalData.tableFullData;
                 var checkboxOpts = computeCheckboxOpts.value;
                 var treeOpts = computeTreeOpts.value;
@@ -292,12 +294,14 @@ var editHook = {
                 });
                 // 如果绑定了多选属性，则更新状态
                 if (!checkField) {
+                    var selectRowMaps_1 = __assign({}, selectCheckboxMaps);
                     rows.forEach(function (row) {
-                        var sIndex = $xetable.findRowIndexOf(selectCheckboxRows, row);
-                        if (sIndex > -1) {
-                            selectCheckboxRows.splice(sIndex, 1);
+                        var rowid = getRowid($xetable, row);
+                        if (selectRowMaps_1[rowid]) {
+                            delete selectRowMaps_1[rowid];
                         }
                     });
+                    reactData.selectCheckboxMaps = selectRowMaps_1;
                 }
                 // 从数据源中移除
                 if (tableFullData === rows) {
@@ -511,6 +515,11 @@ var editHook = {
                         $columnIndex: $xetable.getVMColumnIndex(column)
                     }, evnt || null);
                 }
+                if (GlobalConfig.cellVaildMode === 'obsolete') {
+                    if ($xetable.clearValidate) {
+                        return $xetable.clearValidate();
+                    }
+                }
                 return nextTick();
             },
             /**

package/es/export/src/hook.js

@@ -261,7 +261,8 @@ var tableExportHook = {
         var $xegrid = inject('$xegrid', null);
         var hasTreeChildren = function (row) {
             var treeOpts = computeTreeOpts.value;
-            return row[treeOpts.children] && row[treeOpts.children].length;
+            var childrenField = treeOpts.children || treeOpts.childrenField;
+            return row[childrenField] && row[childrenField].length;
         };
         var getSeq = function (row, $rowIndex, column, $columnIndex) {
             var seqOpts = computeSeqOpts.value;

package/es/filter/src/hook.js

@@ -17,9 +17,9 @@ import { getDomNode, triggerEvent } from '../../tools/dom';
 var tableFilterMethodKeys = ['setFilter', 'clearFilter', 'getCheckedFilters'];
 var tableFilterHook = {
     setupTable: function ($xetable) {
-        var reactData = $xetable.reactData, internalData = $xetable.internalData;
+        var props = $xetable.props, reactData = $xetable.reactData, internalData = $xetable.internalData;
         var _a = $xetable.getRefMaps(), refTableBody = _a.refTableBody, refTableFilter = _a.refTableFilter;
-        var computeFilterOpts = $xetable.getComputeMaps().computeFilterOpts;
+        var _b = $xetable.getComputeMaps(), computeFilterOpts = _b.computeFilterOpts, computeMouseOpts = _b.computeMouseOpts;
         var filterPrivateMethods = {
             checkFilterOptions: function () {
                 var filterStore = reactData.filterStore;
@@ -147,8 +147,10 @@ var tableFilterHook = {
              * @param {Event} evnt 事件
              */
             confirmFilterEvent: function (evnt) {
+                var mouseConfig = props.mouseConfig;
                 var filterStore = reactData.filterStore, oldScrollXLoad = reactData.scrollXLoad, oldScrollYLoad = reactData.scrollYLoad;
                 var filterOpts = computeFilterOpts.value;
+                var mouseOpts = computeMouseOpts.value;
                 var column = filterStore.column;
                 var field = column.field;
                 var values = [];
@@ -160,12 +162,16 @@ var tableFilterHook = {
                     }
                 });
                 var filterList = $xetable.getCheckedFilters();
+                var params = { $table: $xetable, $event: evnt, column: column, field: field, property: field, values: values, datas: datas, filters: filterList, filterList: filterList };
                 // 如果是服务端筛选，则跳过本地筛选处理
                 if (!filterOpts.remote) {
                     $xetable.handleTableData(true);
                     $xetable.checkSelectionStatus();
                 }
-                $xetable.dispatchEvent('filter-change', { column: column, field: field, property: field, values: values, datas: datas, filters: filterList, filterList: filterList }, evnt);
+                if (mouseConfig && mouseOpts.area && $xetable.handleFilterEvent) {
+                    $xetable.handleFilterEvent(evnt, params);
+                }
+                $xetable.dispatchEvent('filter-change', params, evnt);
                 $xetable.closeFilter();
                 $xetable.updateFooter().then(function () {
                     var scrollXLoad = reactData.scrollXLoad, scrollYLoad = reactData.scrollYLoad;

package/es/footer/src/footer.js

@@ -37,7 +37,7 @@ export default defineComponent({
     setup: function (props) {
         var $xetable = inject('$xetable', {});
         var xID = $xetable.xID, tableProps = $xetable.props, tableReactData = $xetable.reactData, tableInternalData = $xetable.internalData;
-        var _a = $xetable.getRefMaps(), refTableHeader = _a.refTableHeader, refTableBody = _a.refTableBody;
+        var _a = $xetable.getRefMaps(), refTableHeader = _a.refTableHeader, refTableBody = _a.refTableBody, refValidTooltip = _a.refValidTooltip;
         var _b = $xetable.getComputeMaps(), computeTooltipOpts = _b.computeTooltipOpts, computeColumnOpts = _b.computeColumnOpts;
         var refElem = ref();
         var refFooterTable = ref();
@@ -53,6 +53,7 @@ export default defineComponent({
             var fixedType = props.fixedType;
             var scrollXLoad = tableReactData.scrollXLoad;
             var lastScrollLeft = tableInternalData.lastScrollLeft;
+            var validTip = refValidTooltip.value;
             var tableHeader = refTableHeader.value;
             var tableBody = refTableBody.value;
             var headerElem = tableHeader ? tableHeader.$el : null;
@@ -61,7 +62,7 @@ export default defineComponent({
             var scrollLeft = footerElem.scrollLeft;
             var isX = scrollLeft !== lastScrollLeft;
             tableInternalData.lastScrollLeft = scrollLeft;
-            tableInternalData.lastScrollTime = Date.now();
+            tableReactData.lastScrollTime = Date.now();
             if (headerElem) {
                 headerElem.scrollLeft = scrollLeft;
             }
@@ -71,6 +72,9 @@ export default defineComponent({
             if (scrollXLoad && isX) {
                 $xetable.triggerScrollXEvent(evnt);
             }
+            if (isX && validTip && validTip.reactData.visible) {
+                validTip.updatePlacement();
+            }
             $xetable.dispatchEvent('scroll', { type: renderType, fixed: fixedType, scrollTop: bodyElem.scrollTop, scrollLeft: scrollLeft, isX: isX, isY: false }, evnt);
         };
         onMounted(function () {

package/es/form/src/form.js

@@ -14,7 +14,7 @@ import XEUtils from 'xe-utils';
 import GlobalConfig from '../../v-x-e-table/src/conf';
 import { VXETable } from '../../v-x-e-table';
 import { getFuncText, isEnableConf, eqEmptyValue } from '../../tools/utils';
-import { errLog } from '../../tools/log';
+import { errLog, warnLog } from '../../tools/log';
 import { scrollToView } from '../../tools/dom';
 import { createItem, handleFieldOrItem, isHiddenItem, isActivetem } from './util';
 import { useSize } from '../../hooks/size';
@@ -312,10 +312,10 @@ export default defineComponent({
                     if (rules_1) {
                         var itemValue_1 = XEUtils.isUndefined(val) ? XEUtils.get(data, property) : val;
                         rules_1.forEach(function (rule) {
-                            var type = rule.type, trigger = rule.trigger, required = rule.required;
+                            var type = rule.type, trigger = rule.trigger, required = rule.required, validator = rule.validator;
                             if (validType === 'all' || !trigger || validType === trigger) {
-                                if (XEUtils.isFunction(rule.validator)) {
-                                    var customValid = rule.validator({
+                                if (validator) {
+                                    var validParams = {
                                         itemValue: itemValue_1,
                                         rule: rule,
                                         rules: rules_1,
@@ -323,7 +323,29 @@ export default defineComponent({
                                         field: property,
                                         property: property,
                                         $form: $xeform
-                                    });
+                                    };
+                                    var customValid = void 0;
+                                    if (XEUtils.isString(validator)) {
+                                        var gvItem = VXETable.validators.get(validator);
+                                        if (gvItem) {
+                                            if (gvItem.itemValidatorMethod) {
+                                                customValid = gvItem.itemValidatorMethod(validParams);
+                                            }
+                                            else {
+                                                if (process.env.NODE_ENV === 'development') {
+                                                    warnLog('vxe.error.notValidators', [validator]);
+                                                }
+                                            }
+                                        }
+                                        else {
+                                            if (process.env.NODE_ENV === 'development') {
+                                                errLog('vxe.error.notValidators', [validator]);
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        customValid = validator(validParams);
+                                    }
                                     if (customValid) {
                                         if (XEUtils.isError(customValid)) {
                                             errorRules.push(new Rule({ type: 'custom', trigger: trigger, content: customValid.message, rule: new Rule(rule) }));
@@ -441,7 +463,10 @@ export default defineComponent({
         };
         var validateField = function (fieldOrItem, callback) {
             var fields = [];
-            if (!XEUtils.isArray(fieldOrItem)) {
+            if (XEUtils.isArray(fieldOrItem)) {
+                fields = fieldOrItem;
+            }
+            else {
                 fields = [fieldOrItem];
             }
             return beginValidate(fields.map(function (field) { return handleFieldOrItem($xeform, field); }), '', callback);