vxe-table 4.1.9 → 4.1.11

package/packages/table/src/table.ts

@@ -259,10 +259,12 @@ export default defineComponent({
       rowExpandedReserveRowMap: {},
       // 树结构数据，已展开保留的行
       treeExpandedReserveRowMap: {},
-      // 完整数据、条件处理后
+      // 列表完整数据、条件处理后
       tableFullData: [],
-      treeFullData: [],
       afterFullData: [],
+      // 树结构完整数据、条件处理后
+      tableFullTreeData: [],
+      afterTreeFullData: [],
       tableSynchData: [],
       tableSourceData: [],
       // 收集的列配置（带分组）
@@ -601,7 +603,7 @@ export default defineComponent({
       return XEUtils.isEqual(val1, val2)
     }
 
-    const getNextSortOrder = (column: any) => {
+    const getNextSortOrder = (column: VxeTableDefines.ColumnInfo) => {
       const sortOpts = computeSortOpts.value
       const { orders } = sortOpts
       const currOrder = column.order || null
@@ -1138,24 +1140,26 @@ export default defineComponent({
     const updateAfterDataIndex = () => {
       const { treeConfig } = props
       const { afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
-      const { treeFullData } = internalData
+      const { afterTreeFullData } = internalData
       const treeOpts = computeTreeOpts.value
       if (treeConfig) {
-        XEUtils.eachTree(treeFullData, (row, index, items, path) => {
+        XEUtils.eachTree(afterTreeFullData, (row, index, items, path) => {
           const rowid = getRowid($xetable, row)
           const allrest = fullAllDataRowIdData[rowid]
           const fullrest = fullDataRowIdData[rowid]
           const seq = path.map((num, i) => i % 2 === 0 ? (Number(num) + 1) : '.').join('')
           if (allrest) {
             allrest.seq = seq
+            allrest._index = index
           }
           if (fullrest) {
             fullrest.seq = seq
+            fullrest._index = index
           } else {
             fullAllDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
             fullDataRowIdData[rowid] = { row, rowid, seq, index: -1, $index: -1, _index: index, items: [], parent: null, level: 0 }
           }
-        }, treeOpts)
+        }, { children: treeOpts.mapChildren })
       } else {
         afterFullData.forEach((row, index) => {
           const rowid = getRowid($xetable, row)
@@ -1164,6 +1168,7 @@ export default defineComponent({
           const seq = index + 1
           if (allrest) {
             allrest.seq = seq
+            allrest._index = index
           }
           if (fullrest) {
             fullrest.seq = seq
@@ -1181,23 +1186,37 @@ export default defineComponent({
      * 如果存在筛选条件，继续处理
      */
     const updateAfterFullData = () => {
-      const { tableFullColumn, tableFullData } = internalData
+      const { treeConfig } = props
+      const { tableFullColumn, tableFullData, tableFullTreeData } = internalData
       const filterOpts = computeFilterOpts.value
       const sortOpts = computeSortOpts.value
+      const treeOpts = computeTreeOpts.value
+      const { transform } = treeOpts
       const { remote: allRemoteFilter, filterMethod: allFilterMethod } = filterOpts
       const { remote: allRemoteSort, sortMethod: allSortMethod } = sortOpts
-      let tableData = tableFullData.slice(0)
+      let tableData: any[] = []
+      let tableTree: any[] = []
+
+      // 处理列
       if (!allRemoteFilter || !allRemoteSort) {
-        const filterColumns: any[] = []
-        const orderColumns: any[] = []
-        tableFullColumn.forEach((column: any) => {
+        const filterColumns: {
+          column: VxeTableDefines.ColumnInfo
+          valueList: any[]
+          itemList: VxeTableDefines.FilterOption[]
+        }[] = []
+        const orderColumns: {
+          column: VxeTableDefines.ColumnInfo
+          property: string
+          order: VxeTablePropTypes.SortOrder
+        }[] = []
+        tableFullColumn.forEach((column) => {
           const { sortable, order, filters } = column
           if (!allRemoteFilter && filters && filters.length) {
             const valueList: any[] = []
-            const itemList: any[] = []
-            filters.forEach((item: any) => {
+            const itemList: VxeTableDefines.FilterOption[] = []
+            filters.forEach((item) => {
               if (item.checked) {
-                itemList.push(item)
+                itemList.push(item as VxeTableDefines.FilterOption)
                 valueList.push(item.value)
               }
             })
@@ -1213,41 +1232,70 @@ export default defineComponent({
         // 处理筛选
         // 支持单列、多列、组合筛选
         if (!allRemoteFilter && filterColumns.length) {
-          tableData = tableData.filter((row: any) => {
+          const handleFilter = (row: any) => {
             return filterColumns.every(({ column, valueList, itemList }) => {
               const { filterMethod, filterRender } = column
               const compConf = filterRender ? VXETable.renderer.get(filterRender.name) : null
               const compFilterMethod = compConf ? compConf.filterMethod : null
-              const defaultFilterMethod: any = compConf ? (compConf as any).defaultFilterMethod : null
+              const defaultFilterMethod = compConf ? compConf.defaultFilterMethod : null
               const cellValue = getCellValue(row, column)
               if (filterMethod) {
-                return itemList.some((item: any) => filterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xetable }))
+                return itemList.some((item) => filterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xetable }))
               } else if (compFilterMethod) {
-                return itemList.some((item: any) => compFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xetable }))
+                return itemList.some((item) => compFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xetable }))
               } else if (allFilterMethod) {
                 return allFilterMethod({ options: itemList, values: valueList, cellValue, row, column })
               } else if (defaultFilterMethod) {
-                return itemList.some((item: any) => defaultFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xetable }))
+                return itemList.some((item) => defaultFilterMethod({ value: item.value, option: item, cellValue, row, column, $table: $xetable }))
               }
               return valueList.indexOf(XEUtils.get(row, column.property)) > -1
             })
-          })
+          }
+          if (treeConfig && transform) {
+            // 筛选虚拟树
+            tableTree = XEUtils.searchTree(tableFullTreeData, handleFilter, { ...treeOpts, original: true })
+            tableData = tableTree
+          } else {
+            tableData = treeConfig ? tableFullTreeData.filter(handleFilter) : tableFullData.filter(handleFilter)
+            tableTree = tableData
+          }
+        } else {
+          if (treeConfig && transform) {
+            // 还原虚拟树
+            tableTree = XEUtils.searchTree(tableFullTreeData, () => true, { ...treeOpts, original: true })
+            tableData = tableTree
+          } else {
+            tableData = treeConfig ? tableFullTreeData.slice(0) : tableFullData.slice(0)
+            tableTree = tableData
+          }
         }
 
-        // 处理排序
+        // 处理排序（不能用于树形结构）
         // 支持单列、多列、组合排序
         if (!allRemoteSort && orderColumns.length) {
-          if (allSortMethod) {
-            const sortRests = allSortMethod({ data: tableData, sortList: orderColumns, $table: $xetable })
-            tableData = XEUtils.isArray(sortRests) ? sortRests : tableData
+          if (treeConfig && transform) {
+            // 虚拟树和列表一样，只能排序根级节点
+            if (allSortMethod) {
+              const sortRests = allSortMethod({ data: tableTree, sortList: orderColumns, $table: $xetable })
+              tableTree = XEUtils.isArray(sortRests) ? sortRests : tableTree
+            } else {
+              tableTree = XEUtils.orderBy(tableTree, orderColumns.map(({ column, order }) => [getOrderField(column), order]))
+            }
+            tableData = tableTree
           } else {
-            tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField(column), order]))
+            if (allSortMethod) {
+              const sortRests = allSortMethod({ data: tableData, sortList: orderColumns, $table: $xetable })
+              tableData = XEUtils.isArray(sortRests) ? sortRests : tableData
+            } else {
+              tableData = XEUtils.orderBy(tableData, orderColumns.map(({ column, order }) => [getOrderField(column), order]))
+            }
+            tableTree = tableData
           }
         }
       }
       internalData.afterFullData = tableData
+      internalData.afterTreeFullData = tableTree
       updateAfterDataIndex()
-      return tableData
     }
 
     const updateStyle = () => {
@@ -1273,7 +1321,7 @@ export default defineComponent({
         const fixedType = index > 0 ? name : ''
         const layoutList = ['header', 'body', 'footer']
         const isFixedLeft = fixedType === 'left'
-        let fixedColumn: any[] = []
+        let fixedColumn: VxeTableDefines.ColumnInfo[] = []
         let fixedWrapperElem: HTMLDivElement
         if (fixedType) {
           fixedColumn = isFixedLeft ? columnStore.leftList : columnStore.rightList
@@ -1333,12 +1381,12 @@ export default defineComponent({
                   let childWidth = 0
                   let countChild = 0
                   if (hasEllipsis) {
-                    XEUtils.eachTree(column.children, (item: any) => {
+                    XEUtils.eachTree(column.children, (item) => {
                       if (!item.children || !column.children.length) {
                         countChild++
                       }
                       childWidth += item.renderWidth
-                    })
+                    }, { children: 'children' })
                   }
                   thElem.style.width = hasEllipsis ? `${childWidth - countChild - (border ? 2 : 0)}px` : ''
                 }
@@ -1364,7 +1412,7 @@ export default defineComponent({
                 wrapperElem.style.top = `${headerHeight}px`
               }
               fixedWrapperElem.style.height = `${(customHeight > 0 ? customHeight - headerHeight - footerHeight : tableHeight) + headerHeight + footerHeight - scrollbarHeight * (showFooter ? 2 : 1)}px`
-              fixedWrapperElem.style.width = `${fixedColumn.reduce((previous: any, column: any) => previous + column.renderWidth, isFixedLeft ? 0 : scrollbarWidth)}px`
+              fixedWrapperElem.style.width = `${fixedColumn.reduce((previous, column) => previous + column.renderWidth, isFixedLeft ? 0 : scrollbarWidth)}px`
             }
 
             let tWidth = tableWidth
@@ -1703,7 +1751,7 @@ export default defineComponent({
       const { fullAllDataRowIdData } = internalData
       const treeOpts = computeTreeOpts.value
       const checkboxOpts = computeCheckboxOpts.value
-      const { loadMethod } = treeOpts
+      const { transform, loadMethod } = treeOpts
       const { checkStrictly } = checkboxOpts
       const rest = fullAllDataRowIdData[getRowid($xetable, row)]
       return new Promise(resolve => {
@@ -1724,9 +1772,17 @@ export default defineComponent({
                 if (!checkStrictly && tableMethods.isCheckedByCheckboxRow(row)) {
                   tableMethods.setCheckboxRow(childRows, true)
                 }
+                nextTick().then(() => {
+                  if (transform) {
+                    return tablePrivateMethods.handleTableData()
+                  }
+                }).then(() => {
+                  return tableMethods.recalculate()
+                }).then(() => resolve())
               })
+            } else {
+              nextTick().then(() => tableMethods.recalculate()).then(() => resolve())
             }
-            resolve(nextTick().then(() => tableMethods.recalculate()))
           })
         } else {
           resolve()
@@ -1854,13 +1910,24 @@ export default defineComponent({
             if (!treeOpts.children) {
               errLog('vxe.error.reqProp', ['tree-config.children'])
             }
+            if (!treeOpts.mapChildren) {
+              errLog('vxe.error.reqProp', ['tree-config.mapChildren'])
+            }
+            if (treeOpts.children === treeOpts.mapChildren) {
+              errLog('vxe.error.errConflicts', ['tree-config.children', 'tree-config.mapChildren'])
+            }
             fullData.forEach(row => {
               if (row[treeOpts.children] && row[treeOpts.children].length) {
                 warnLog('vxe.error.errConflicts', ['tree-config.transform', `row.${treeOpts.children}`])
               }
             })
           }
-          treeData = XEUtils.toArrayTree(fullData, { key: treeOpts.rowField, parentKey: treeOpts.parentField, children: treeOpts.children })
+          treeData = XEUtils.toArrayTree(fullData, {
+            key: treeOpts.rowField,
+            parentKey: treeOpts.parentField,
+            children: treeOpts.children,
+            mapChildren: treeOpts.mapChildren
+          })
           fullData = treeData.slice(0)
         } else {
           treeData = fullData.slice(0)
@@ -1876,7 +1943,7 @@ export default defineComponent({
       reactData.scrollYLoad = sYLoad
       // 全量数据
       internalData.tableFullData = fullData
-      internalData.treeFullData = treeData
+      internalData.tableFullTreeData = treeData
       // 缓存数据
       tablePrivateMethods.cacheRowMap(true)
       // 原始数据
@@ -2149,26 +2216,6 @@ export default defineComponent({
       return scrollYLoad
     }
 
-    const updateVirtualTreeData = () => {
-      const { scrollYLoad: oldScrollYLoad, treeExpandeds } = reactData
-      const { treeFullData } = internalData
-      const treeOpts = computeTreeOpts.value
-      const fullData: any[] = []
-      const expandMaps: Map<any, number> = new Map()
-      XEUtils.eachTree(treeFullData, (row, index, items, path, parent) => {
-        if (!parent || (expandMaps.has(parent) && $xetable.findRowIndexOf(treeExpandeds, parent) > -1)) {
-          expandMaps.set(row, 1)
-          fullData.push(row)
-        }
-      }, treeOpts)
-      const scrollYLoad = updateScrollYStatus(fullData)
-      internalData.tableFullData = scrollYLoad ? fullData : treeFullData
-      if (scrollYLoad || oldScrollYLoad !== scrollYLoad) {
-        return tablePrivateMethods.handleTableData(true).then(() => tableMethods.recalculate())
-      }
-      return nextTick()
-    }
-
     /**
      * 展开与收起树节点
      * @param rows
@@ -2226,7 +2273,7 @@ export default defineComponent({
      */
     const handleVirtualTreeExpand = (rows: any[], expanded: boolean) => {
       return handleBaseTreeExpand(rows, expanded).then(() => {
-        return updateVirtualTreeData()
+        return tablePrivateMethods.handleTableData()
       }).then(() => {
         return tableMethods.recalculate()
       })
@@ -2301,7 +2348,7 @@ export default defineComponent({
         return clearTableAllStatus($xetable)
       },
       /**
-       * 同步 data 数据
+       * 同步 data 数据（即将废弃）
        * 如果用了该方法，那么组件将不再记录增删改的状态，只能自行实现对应逻辑
        * 对于某些特殊的场景，比如深层树节点元素发生变动时可能会用到
        */
@@ -2396,7 +2443,7 @@ export default defineComponent({
         const { keepSource } = props
         const { tableSourceData, fullDataRowIdData, fullAllDataRowIdData } = internalData
         const treeOpts = computeTreeOpts.value
-        const { children } = treeOpts
+        const { transform, children, mapChildren } = treeOpts
         const parentRest = fullAllDataRowIdData[getRowid($xetable, row)]
         const parentLevel = parentRest ? parentRest.level : 0
         return tableMethods.createData(childRecords).then((rows) => {
@@ -2414,6 +2461,9 @@ export default defineComponent({
             fullAllDataRowIdData[rowid] = rest
           }, treeOpts)
           row[children] = rows
+          if (transform) {
+            row[mapChildren] = rows
+          }
           return rows
         })
       },
@@ -3338,7 +3388,7 @@ export default defineComponent({
         return tableMethods.getSortColumns().length > 0
       },
       getSortColumns () {
-        const sortList: any[] = []
+        const sortList: VxeTableDefines.SortCheckedParams[] = []
         const { tableFullColumn } = internalData
         tableFullColumn.forEach((column) => {
           const { order } = column
@@ -3551,7 +3601,7 @@ export default defineComponent({
             return handleAsyncTreeExpandChilds(row)
           }).then(() => {
             if (transform) {
-              return updateVirtualTreeData()
+              return tablePrivateMethods.handleTableData()
             }
           }).then(() => {
             return tableMethods.recalculate()
@@ -3627,15 +3677,15 @@ export default defineComponent({
        */
       clearTreeExpand () {
         const { treeExpandeds } = reactData
-        const { treeFullData } = internalData
+        const { tableFullTreeData } = internalData
         const treeOpts = computeTreeOpts.value
         const { reserve } = treeOpts
         const isExists = treeExpandeds.length
         reactData.treeExpandeds = []
         if (reserve) {
-          XEUtils.eachTree(treeFullData, row => handleTreeExpandReserve(row, false), treeOpts)
+          XEUtils.eachTree(tableFullTreeData, row => handleTreeExpandReserve(row, false), treeOpts)
         }
-        return updateVirtualTreeData().then(() => {
+        return tablePrivateMethods.handleTableData().then(() => {
           if (isExists) {
             tableMethods.recalculate()
           }
@@ -4448,10 +4498,29 @@ export default defineComponent({
         return record
       },
       handleTableData (force?: boolean) {
+        const { treeConfig } = props
         const { scrollYLoad } = reactData
         const { scrollYStore, fullDataRowIdData } = internalData
-        const fullData = force ? updateAfterFullData() : internalData.afterFullData
-        const tableData = scrollYLoad ? fullData.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullData.slice(0)
+        const { treeExpandeds } = reactData
+        const treeOpts = computeTreeOpts.value
+        let fullList: any[] = []
+        // 是否进行数据处理
+        if (force) {
+          updateAfterFullData()
+        }
+        // 如果为虚拟树，将树结构拍平
+        if (treeConfig && treeOpts.transform) {
+          const expandMaps: Map<any, number> = new Map()
+          XEUtils.eachTree(internalData.afterTreeFullData, (row, index, items, path, parent) => {
+            if (!parent || (expandMaps.has(parent) && $xetable.findRowIndexOf(treeExpandeds, parent) > -1)) {
+              expandMaps.set(row, 1)
+              fullList.push(row)
+            }
+          }, { children: treeOpts.mapChildren })
+        } else {
+          fullList = internalData.afterFullData
+        }
+        const tableData = scrollYLoad ? fullList.slice(scrollYStore.startIndex, scrollYStore.endIndex) : fullList.slice(0)
         tableData.forEach((row, $index) => {
           const rowid = getRowid($xetable, row)
           const rest = fullDataRowIdData[rowid]
@@ -4469,7 +4538,7 @@ export default defineComponent({
       cacheRowMap (isSource) {
         const { treeConfig } = props
         const treeOpts = computeTreeOpts.value
-        let { fullDataRowIdData, fullAllDataRowIdData, tableFullData, treeFullData } = internalData
+        let { fullDataRowIdData, fullAllDataRowIdData, tableFullData, tableFullTreeData } = internalData
         const rowkey = getRowkey($xetable)
         const isLazy = treeConfig && treeOpts.lazy
         const handleCache = (row: any, index: any, items: any, path?: any[], parent?: any, nodes?: any[]) => {
@@ -4494,7 +4563,7 @@ export default defineComponent({
         }
         fullAllDataRowIdData = internalData.fullAllDataRowIdData = {}
         if (treeConfig) {
-          XEUtils.eachTree(treeFullData, handleCache, treeOpts)
+          XEUtils.eachTree(tableFullTreeData, handleCache, treeOpts)
         } else {
           tableFullData.forEach(handleCache)
         }
@@ -4794,7 +4863,7 @@ export default defineComponent({
         const editOpts = computeEditOpts.value
         const { actived } = editStore
         const { row, column } = params
-        const cell = evnt.currentTarget as HTMLTableDataCellElement
+        const cell = evnt.currentTarget as HTMLTableCellElement
         handleTargetEnterEvent()
         if (isEnableConf(editConfig)) {
           if ((editOpts.mode === 'row' && actived.row === row) || (actived.row === row && actived.column === column)) {
@@ -4821,7 +4890,7 @@ export default defineComponent({
       triggerFooterTooltipEvent (evnt, params) {
         const { column } = params
         const { tooltipStore } = internalData
-        const cell = evnt.currentTarget as HTMLTableDataCellElement
+        const cell = evnt.currentTarget as HTMLTableCellElement
         handleTargetEnterEvent()
         if (tooltipStore.column !== column || !tooltipStore.visible) {
           handleTooltip(evnt, cell, cell.querySelector('.vxe-cell--item') || cell.children[0], null, params)
@@ -5208,7 +5277,6 @@ export default defineComponent({
         tablePrivateMethods.handleTableData()
         tablePrivateMethods.updateScrollYSpace()
       },
-      updateVirtualTreeData,
       /**
        * 处理固定列的显示状态
        */
@@ -5346,6 +5414,7 @@ export default defineComponent({
       }
     }
 
+    // 检测对应模块是否安装
     if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
       'openExport,openPrint,exportData,openImport,importData,saveFile,readFile,importByFile,print'.split(',').forEach(name => {
         ($xetable as any)[name] = function () {

package/packages/table/src/util.ts

@@ -45,7 +45,7 @@ export function getRowUniqueId () {
 export function getRowkey ($xetable: VxeTableConstructor) {
   const { props } = $xetable
   const { rowId } = props
-  return rowId || '_XID'
+  return rowId || '_X_ID'
 }
 
 // 行主键 value

package/packages/v-x-e-table/src/conf.ts

@@ -51,7 +51,7 @@ const GlobalConfig: VXETableGlobalConfig = {
     //  storage: false,
     //  checkMethod () {}
     // },
-    // rowId: '_XID', // 行数据的唯一主键字段名
+    // rowId: '_X_ID', // 行数据的唯一主键字段名
     sortConfig: {
       // remote: false,
       // trigger: 'default',
@@ -69,6 +69,7 @@ const GlobalConfig: VXETableGlobalConfig = {
       parentField: 'parentId',
       children: 'children',
       hasChild: 'hasChild',
+      mapChildren: '_X_CHILD',
       indent: 20,
       showIcon: true
     },

package/packages/validator/src/hook.ts

@@ -149,7 +149,7 @@ const validatorHook: VxeGlobalHooksHandles.HookOptions = {
           const ruleProps = Object.keys(validRest)
           return nextTick().then(() => {
             if (ruleProps.length) {
-              return validRest[ruleProps[0]][0]
+              return Promise.reject(validRest[ruleProps[0]][0])
             }
             if (cb) {
               cb()

package/types/column.d.ts

@@ -54,6 +54,7 @@ export namespace VxeColumnPropTypes {
   export type FilterMultiple = boolean;
 
   interface FilterMethodParams {
+    $table: VxeTableConstructor,
     value: any;
     option: VxeTableDefines.FilterOption;
     cellValue: any;

package/types/table.d.ts

@@ -100,6 +100,7 @@ export interface TablePublicMethods {
   /**
    * 同步 data 数据；如果用了该方法，那么组件将不再记录增删改的状态，只能自行实现对应逻辑
    * 对于某些特殊的场景，比如深层树节点元素发生变动时可能会用到
+   * @deprecated
    */
   syncData(): Promise<any>;
   /**
@@ -712,7 +713,6 @@ export interface TablePrivateMethods {
   updateScrollYSpace(): void;
   updateScrollXData(): void;
   updateScrollYData(): void;
-  updateVirtualTreeData(): Promise<any>;
   checkScrolling(): void;
   updateZindex(): void;
   updateCellAreas(): void;
@@ -957,12 +957,14 @@ export interface TableInternalData {
   rowExpandedReserveRowMap: any;
   // 树结构数据，已展开保留的行
   treeExpandedReserveRowMap: any;
-  // 完整数据、条件处理后
+  // 列表完整数据、条件处理后
   tableFullData: any[];
   afterFullData: any[];
   tableSynchData: any[];
   tableSourceData: any[];
-  treeFullData: any[];
+  // 树的全量数据、条件处理后
+  tableFullTreeData: any[];
+  afterTreeFullData: any[];
   // 收集的列配置（带分组）
   collectColumn: VxeTableDefines.ColumnInfo[],
   // 完整所有列（不带分组）
@@ -1436,6 +1438,7 @@ export namespace VxeTablePropTypes {
     rowField?: string;
     parentField?: string;
     children?: string;
+    mapChildren?: string;
     indent?: number;
     line?: boolean;
     expandAll?: boolean;
@@ -1468,6 +1471,7 @@ export namespace VxeTablePropTypes {
     children: string;
     indent: number;
     hasChild: string;
+    mapChildren: string;
     iconOpen: string;
     iconClose: string;
     iconLoaded: string;