vxe-table 4.5.0-beta.2 → 4.5.0-beta.20

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
@@ -76,6 +77,7 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 * [x] VxeGlobalRenderer
 * [x] Virtual scroller
 * [x] Virtual merger
+* [x] CSS Variable Theme
 * [x] (pro) Cell area selection
 * [x] (pro) Cell copy & paste
 * [x] (pro) Cell find and replace

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,15 +20,11 @@
   * 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能
 
 * 计划
-  * [x] ~~v1.0 基于 vue2.6+，支持所有主流的浏览器，实现表格的一切实用的功能~~
-  * [x] ~~v2.0 基于 vue2.6+，支持所有主流的浏览器，同时兼具功能与性能~~
-  * [x] v3.0 基于 vue2.6+，支持现代浏览器并保留兼容 IE11
-  * [x] v4.0 基于 vue3.2+，只支持现代浏览器，不支持 IE
-  * [ ] 下一阶段：sticky 渲染模式、css 变量主题、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化
-
-## QQ 交流群
-
-![qq](https://vxetable.cn/static/donation/qq.png)
+  * [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 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化
 
 ## 浏览器支持
 
@@ -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] 虚拟列表
@@ -81,6 +78,7 @@
 * [x] 渲染器
 * [x] 虚拟滚动
 * [x] 虚拟合并
+* [x] CSS 变量主题
 * [x] (pro) 单元格区域选取
 * [x] (pro) 单元格复制/粘贴
 * [x] (pro) 单元格查找和替换
@@ -154,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] 虛擬清單
@@ -75,6 +76,7 @@ Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
 * [x] 渲染器
 * [x] 虛擬滾動
 * [x] 虛擬合併
+* [x] CSS 變量主題
 * [x] (pro) 儲存格區域選取
 * [x] (pro) 儲存格複製/粘貼
 * [x] (pro) 儲存格查找和替換

package/es/button/src/button.js

@@ -12,7 +12,8 @@ export default defineComponent({
          * 按钮类型
          */
         type: String,
-        className: String,
+        className: [String, Function],
+        popupClassName: [String, Function],
         /**
          * 按钮尺寸
          */
@@ -330,7 +331,7 @@ export default defineComponent({
         });
         var renderVN = function () {
             var _a, _b, _c, _d;
-            var className = props.className, transfer = props.transfer, type = props.type, round = props.round, circle = props.circle, destroyOnClose = props.destroyOnClose, status = props.status, name = props.name, disabled = props.disabled, loading = props.loading;
+            var className = props.className, popupClassName = props.popupClassName, transfer = props.transfer, type = props.type, round = props.round, circle = props.circle, destroyOnClose = props.destroyOnClose, status = props.status, name = props.name, disabled = props.disabled, loading = props.loading;
             var inited = reactData.inited, showPanel = reactData.showPanel;
             var isFormBtn = computeIsFormBtn.value;
             var btnType = computeBtnType.value;
@@ -338,7 +339,7 @@ export default defineComponent({
             if (slots.dropdowns) {
                 return h('div', {
                     ref: refElem,
-                    class: ['vxe-button--dropdown', className, (_a = {},
+                    class: ['vxe-button--dropdown', className ? (XEUtils.isFunction(className) ? className({ $button: $xebutton }) : className) : '', (_a = {},
                             _a["size--".concat(vSize)] = vSize,
                             _a['is--active'] = showPanel,
                             _a)]
@@ -370,7 +371,7 @@ export default defineComponent({
                     }, [
                         h('div', {
                             ref: refBtnPanel,
-                            class: ['vxe-button--dropdown-panel', (_c = {},
+                            class: ['vxe-button--dropdown-panel', popupClassName ? (XEUtils.isFunction(popupClassName) ? popupClassName({ $button: $xebutton }) : popupClassName) : '', (_c = {},
                                     _c["size--".concat(vSize)] = vSize,
                                     _c['animat--leave'] = reactData.animatVisible,
                                     _c['animat--enter'] = showPanel,

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;
@@ -235,12 +237,11 @@ var editHook = {
                         }
                     }
                 }
-                var insertList = editStore.insertList, insertMaps = editStore.insertMaps;
+                var insertMaps = editStore.insertMaps;
                 newRecords.forEach(function (newRow) {
                     var rowid = getRowid($xetable, newRow);
                     insertMaps[rowid] = newRow;
                 });
-                insertList.unshift.apply(insertList, newRecords);
                 $xetable.cacheRowMap();
                 $xetable.updateScrollYStatus();
                 $xetable.handleTableData(treeConfig && transform);
@@ -270,12 +271,12 @@ var editHook = {
              */
             remove: function (rows) {
                 var treeConfig = props.treeConfig;
-                var mergeList = reactData.mergeList, editStore = reactData.editStore, selection = reactData.selection;
+                var mergeList = reactData.mergeList, editStore = reactData.editStore, selectCheckboxRows = reactData.selectCheckboxRows;
                 var tableFullTreeData = internalData.tableFullTreeData, afterFullData = internalData.afterFullData, tableFullData = internalData.tableFullData;
                 var checkboxOpts = computeCheckboxOpts.value;
                 var treeOpts = computeTreeOpts.value;
                 var transform = treeOpts.transform;
-                var actived = editStore.actived, removeList = editStore.removeList, insertList = editStore.insertList, insertMaps = editStore.insertMaps;
+                var actived = editStore.actived, removeMaps = editStore.removeMaps, insertMaps = editStore.insertMaps;
                 var checkField = checkboxOpts.checkField;
                 var rest = [];
                 if (!rows) {
@@ -287,15 +288,16 @@ var editHook = {
                 // 如果是新增，则保存记录
                 rows.forEach(function (row) {
                     if (!$xetable.isInsertByRow(row)) {
-                        removeList.push(row);
+                        var rowid = getRowid($xetable, row);
+                        removeMaps[rowid] = row;
                     }
                 });
                 // 如果绑定了多选属性，则更新状态
                 if (!checkField) {
                     rows.forEach(function (row) {
-                        var sIndex = $xetable.findRowIndexOf(selection, row);
+                        var sIndex = $xetable.findRowIndexOf(selectCheckboxRows, row);
                         if (sIndex > -1) {
-                            selection.splice(sIndex, 1);
+                            selectCheckboxRows.splice(sIndex, 1);
                         }
                     });
                 }
@@ -353,11 +355,9 @@ var editHook = {
                 // 从新增中移除已删除的数据
                 rows.forEach(function (row) {
                     var rowid = getRowid($xetable, row);
-                    var iIndex = $xetable.findRowIndexOf(insertList, row);
-                    if (iIndex > -1) {
-                        insertList.splice(iIndex, 1);
+                    if (insertMaps[rowid]) {
+                        delete insertMaps[rowid];
                     }
-                    delete insertMaps[rowid];
                 });
                 $xetable.updateFooter();
                 $xetable.cacheRowMap();
@@ -421,10 +421,9 @@ var editHook = {
             getInsertRecords: function () {
                 var editStore = reactData.editStore;
                 var fullAllDataRowIdData = internalData.fullAllDataRowIdData;
-                var insertList = editStore.insertList;
+                var insertMaps = editStore.insertMaps;
                 var insertRecords = [];
-                insertList.forEach(function (row) {
-                    var rowid = getRowid($xetable, row);
+                XEUtils.each(insertMaps, function (row, rowid) {
                     if (fullAllDataRowIdData[rowid]) {
                         insertRecords.push(row);
                     }
@@ -436,7 +435,12 @@ var editHook = {
              */
             getRemoveRecords: function () {
                 var editStore = reactData.editStore;
-                return editStore.removeList;
+                var removeMaps = editStore.removeMaps;
+                var removeRecords = [];
+                XEUtils.each(removeMaps, function (row) {
+                    removeRecords.push(row);
+                });
+                return removeRecords;
             },
             /**
              * 获取更新数据
@@ -509,6 +513,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;
@@ -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);