vxe-table 4.1.3 → 4.1.6

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "vxe-table",
-  "version": "4.1.3",
-  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
+  "version": "4.1.6",
+  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
     "lint": "vue-cli-service lint",
-    "build": "npm run build:examples & npm run build:docs",
-    "build:examples": "vue-cli-service build",
-    "build:docs": "gulp update_docs",
+    "build": "vue-cli-service build",
     "lib:modules": "gulp build",
     "lib:pack": "vue-cli-service build --target lib --name index --dest lib_temp index.ts",
     "lib": "npm run lib:pack && npm run lib:modules",
@@ -29,9 +27,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "devDependencies": {
-    "@types/qrcode": "^1.4.1",
     "@types/resize-observer-browser": "^0.1.6",
-    "@types/sortablejs": "^1.10.7",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -43,18 +39,13 @@
     "@vue/compiler-sfc": "^3.2.18",
     "@vue/eslint-config-standard": "^5.1.2",
     "@vue/eslint-config-typescript": "^7.0.0",
-    "ant-design-vue": "^2.2.8",
     "core-js": "^3.6.5",
-    "dayjs": "^1.10.7",
-    "element-plus": "^1.1.0-beta.24",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^7.0.0",
-    "exceljs": "^4.3.0",
-    "font-awesome": "^4.7.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
     "gulp-babel": "^8.0.0",
@@ -67,29 +58,15 @@
     "gulp-sourcemaps": "^2.6.5",
     "gulp-typescript": "^5.0.1",
     "gulp-uglify": "^3.0.2",
-    "highlight.js": "^11.2.0",
-    "jsbarcode": "^3.11.0",
-    "jspdf": "^2.4.0",
     "node-sass": "^6.0.1",
-    "qrcode": "^1.4.4",
     "sass-loader": "^10.0.5",
-    "sortablejs": "^1.14.0",
     "typescript": "~4.3.5",
     "vue": "^3.2.21",
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.0.11",
     "vuex": "^4.0.2",
-    "vxe-table-plugin-antd": "^3.0.5",
-    "vxe-table-plugin-element": "^3.0.5",
-    "vxe-table-plugin-export-pdf": "^3.0.2",
-    "vxe-table-plugin-export-xlsx": "^3.0.3",
-    "vxe-table-plugin-menus": "^3.0.6",
-    "vxe-table-plugin-renderer": "^3.0.2",
-    "vxe-table-plugin-shortcut-key": "^3.0.2",
     "xe-ajax": "^4.0.5",
-    "xe-clipboard": "^1.10.1",
-    "xe-utils": "^3.4.0",
-    "xlsx": "^0.17.2"
+    "xe-utils": "^3.4.0"
   },
   "peerDependencies": {
     "vue": "^3.2.2",

package/packages/edit/src/hook.ts

@@ -1,8 +1,8 @@
 import { nextTick } from 'vue'
 import XEUtils from 'xe-utils'
 import { renderer } from '../../v-x-e-table'
-import { errLog, getLog, isEnableConf } from '../../tools/utils'
-import { getCellValue, setCellValue } from '../../table/src/util'
+import { errLog, getLog, isEnableConf, warnLog } from '../../tools/utils'
+import { getCellValue, setCellValue, getRowid } from '../../table/src/util'
 import { browse, removeClass, addClass } from '../../tools/dom'
 
 import { VxeGlobalHooksHandles, TableEditMethods, TableEditPrivateMethods } from '../../../types/all'
@@ -59,6 +59,42 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
       }
     }
 
+    function insertTreeRow (newRecords: any[], isAppend: boolean) {
+      const { treeFullData, afterFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
+      const treeOpts = computeTreeOpts.value
+      const funcName = isAppend ? 'push' : 'unshift'
+      newRecords.forEach(item => {
+        const parentRowId = item[treeOpts.parentField]
+        const rowid = getRowid($xetable, item)
+        const matchObj = parentRowId ? XEUtils.findTree(treeFullData, item => parentRowId === item[treeOpts.rowField], treeOpts) : null
+        if (matchObj) {
+          const { item: parentRow } = matchObj
+          const parentRest = fullAllDataRowIdData[getRowid($xetable, parentRow)]
+          const parentLevel = parentRest ? parentRest.level : 0
+          let parentChilds = parentRow[treeOpts.children]
+          if (!XEUtils.isArray(parentChilds)) {
+            parentChilds = parentRow[treeOpts.children] = []
+          }
+          parentChilds[funcName](item)
+          const rest = { row: item, rowid, index: -1, _index: -1, $index: -1, items: parentChilds, parent, level: parentLevel + 1 }
+          fullDataRowIdData[rowid] = rest
+          fullAllDataRowIdData[rowid] = rest
+        } else {
+          if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+            if (parentRowId) {
+              warnLog('vxe.error.unableInsert')
+            }
+          }
+          afterFullData[funcName](item)
+          treeFullData[funcName](item)
+          const rest = { row: item, rowid, index: -1, _index: -1, $index: -1, items: treeFullData, parent: null, level: 0 }
+          fullDataRowIdData[rowid] = rest
+          fullAllDataRowIdData[rowid] = rest
+        }
+      })
+      $xetable.updateVirtualTreeData()
+    }
+
     editMethods = {
       /**
        * 往表格中插入临时数据
@@ -70,68 +106,114 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
       },
       /**
        * 往表格指定行中插入临时数据
-       * 如果 row 为空则从插入到顶部
-       * 如果 row 为 -1 则从插入到底部
-       * 如果 row 为有效行则插入到该行的位置
+       * 如果 row 为空则从插入到顶部，如果为树结构，则插入到目标节点顶部
+       * 如果 row 为 -1 则从插入到底部，如果为树结构，则插入到目标节点底部
+       * 如果 row 为有效行则插入到该行的位置，如果为树结构，则有插入到效的目标节点该行的位置
        * @param {Object/Array} records 新的数据
        * @param {Row} row 指定行
        */
       insertAt (records: any, row: any) {
         const { treeConfig } = props
         const { mergeList, editStore, scrollYLoad } = reactData
-        const { afterFullData, tableFullData } = internalData
+        const { treeFullData, afterFullData, tableFullData, fullDataRowIdData, fullAllDataRowIdData } = internalData
         const sYOpts = computeSYOpts.value
+        const treeOpts = computeTreeOpts.value
+        const { transform } = treeOpts
         if (!XEUtils.isArray(records)) {
           records = [records]
         }
-        const newRecords = records.map((record: any) => $xetable.defineField(Object.assign({}, record)))
+        const newRecords: any[] = records.map((record: any) => $xetable.defineField(Object.assign({}, record)))
         if (!row) {
-          afterFullData.unshift(...newRecords)
-          tableFullData.unshift(...newRecords)
-          // 刷新单元格合并
-          mergeList.forEach((mergeItem: any) => {
-            const { row: mergeRowIndex } = mergeItem
-            if (mergeRowIndex > 0) {
-              mergeItem.row = mergeRowIndex + newRecords.length
-            }
-          })
-        } else {
-          if (row === -1) {
-            afterFullData.push(...newRecords)
-            tableFullData.push(...newRecords)
-            // 刷新单元格合并
-            mergeList.forEach((mergeItem: any) => {
-              const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
-              if (mergeRowIndex + mergeRowspan > afterFullData.length) {
-                mergeItem.rowspan = mergeRowspan + newRecords.length
-              }
-            })
+          // 如果为虚拟树
+          if (treeConfig && transform) {
+            insertTreeRow(newRecords, false)
           } else {
-            if (treeConfig) {
-              throw new Error(getLog('vxe.error.noTree', ['insert']))
-            }
-            const afIndex = $xetable.findRowIndexOf(afterFullData, row)
-            if (afIndex === -1) {
-              throw new Error(errLog('vxe.error.unableInsert'))
-            }
-            afterFullData.splice(afIndex, 0, ...newRecords)
-            tableFullData.splice($xetable.findRowIndexOf(tableFullData, row), 0, ...newRecords)
+            afterFullData.unshift(...newRecords)
+            tableFullData.unshift(...newRecords)
             // 刷新单元格合并
             mergeList.forEach((mergeItem: any) => {
-              const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
-              if (mergeRowIndex > afIndex) {
+              const { row: mergeRowIndex } = mergeItem
+              if (mergeRowIndex > 0) {
                 mergeItem.row = mergeRowIndex + newRecords.length
-              } else if (mergeRowIndex + mergeRowspan > afIndex) {
-                mergeItem.rowspan = mergeRowspan + newRecords.length
               }
             })
           }
+        } else {
+          if (row === -1) {
+            // 如果为虚拟树
+            if (treeConfig && transform) {
+              insertTreeRow(newRecords, true)
+            } else {
+              afterFullData.push(...newRecords)
+              tableFullData.push(...newRecords)
+              // 刷新单元格合并
+              mergeList.forEach((mergeItem: any) => {
+                const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
+                if (mergeRowIndex + mergeRowspan > afterFullData.length) {
+                  mergeItem.rowspan = mergeRowspan + newRecords.length
+                }
+              })
+            }
+          } else {
+            // 如果为虚拟树
+            if (treeConfig && transform) {
+              const matchObj = XEUtils.findTree(treeFullData, item => row[treeOpts.rowField] === item[treeOpts.rowField], treeOpts)
+              if (matchObj) {
+                const { parent: parentRow } = matchObj
+                const parentChilds = matchObj.items
+                const parentRest = fullAllDataRowIdData[getRowid($xetable, parentRow)]
+                const parentLevel = parentRest ? parentRest.level : 0
+                newRecords.forEach((item, i) => {
+                  const rowid = getRowid($xetable, item)
+                  if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                    if (item[treeOpts.parentField]) {
+                      if (parentRow && item[treeOpts.parentField] !== parentRow[treeOpts.rowField]) {
+                        errLog('vxe.error.errProp', [`${treeOpts.parentField}=${item[treeOpts.parentField]}`, `${treeOpts.parentField}=${parentRow[treeOpts.rowField]}`])
+                      }
+                    }
+                  }
+                  if (parentRow) {
+                    item[treeOpts.parentField] = parentRow[treeOpts.rowField]
+                  }
+                  parentChilds.splice(matchObj.index + i, 0, item)
+                  const rest = { row: item, rowid, index: -1, _index: -1, $index: -1, items: parentChilds, parent: parentRow, level: parentLevel + 1 }
+                  fullDataRowIdData[rowid] = rest
+                  fullAllDataRowIdData[rowid] = rest
+                })
+                $xetable.updateVirtualTreeData()
+              } else {
+                if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+                  warnLog('vxe.error.unableInsert')
+                }
+                insertTreeRow(newRecords, true)
+              }
+            } else {
+              if (treeConfig) {
+                throw new Error(getLog('vxe.error.noTree', ['insert']))
+              }
+              const afIndex = $xetable.findRowIndexOf(afterFullData, row)
+              if (afIndex === -1) {
+                throw new Error(errLog('vxe.error.unableInsert'))
+              }
+              afterFullData.splice(afIndex, 0, ...newRecords)
+              tableFullData.splice($xetable.findRowIndexOf(tableFullData, row), 0, ...newRecords)
+              // 刷新单元格合并
+              mergeList.forEach((mergeItem: any) => {
+                const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
+                if (mergeRowIndex > afIndex) {
+                  mergeItem.row = mergeRowIndex + newRecords.length
+                } else if (mergeRowIndex + mergeRowspan > afIndex) {
+                  mergeItem.rowspan = mergeRowspan + newRecords.length
+                }
+              })
+            }
+          }
         }
         editStore.insertList.unshift(...newRecords)
         reactData.scrollYLoad = !treeConfig && sYOpts.gt > -1 && sYOpts.gt < tableFullData.length
         $xetable.updateFooter()
         $xetable.cacheRowMap()
-        $xetable.handleTableData()
+        $xetable.handleTableData(transform)
         $xetable.updateAfterDataIndex()
         $xetable.checkSelectionStatus()
         if (scrollYLoad) {
@@ -156,9 +238,11 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
       remove (rows: any) {
         const { treeConfig } = props
         const { mergeList, editStore, selection, scrollYLoad } = reactData
-        const { afterFullData, tableFullData } = internalData
+        const { treeFullData, afterFullData, tableFullData } = internalData
         const checkboxOpts = computeCheckboxOpts.value
         const sYOpts = computeSYOpts.value
+        const treeOpts = computeTreeOpts.value
+        const { transform } = treeOpts
         const { actived, removeList, insertList } = editStore
         const { checkField: property } = checkboxOpts
         let rest: any[] = []
@@ -189,26 +273,43 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
           internalData.afterFullData = []
           $xetable.clearMergeCells()
         } else {
-          rows.forEach((row: any) => {
-            const tfIndex = $xetable.findRowIndexOf(tableFullData, row)
-            if (tfIndex > -1) {
-              const rItems = tableFullData.splice(tfIndex, 1)
-              rest.push(rItems[0])
-            }
-            const afIndex = $xetable.findRowIndexOf(afterFullData, row)
-            if (afIndex > -1) {
-              // 刷新单元格合并
-              mergeList.forEach((mergeItem: any) => {
-                const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
-                if (mergeRowIndex > afIndex) {
-                  mergeItem.row = mergeRowIndex - 1
-                } else if (mergeRowIndex + mergeRowspan > afIndex) {
-                  mergeItem.rowspan = mergeRowspan - 1
-                }
-              })
-              afterFullData.splice(afIndex, 1)
-            }
-          })
+          // 如果为虚拟树
+          if (treeConfig && transform) {
+            rows.forEach((row: any) => {
+              const rowid = getRowid($xetable, row)
+              const matchObj = XEUtils.findTree(treeFullData, item => rowid === getRowid($xetable, item), treeOpts)
+              if (matchObj) {
+                const rItems = matchObj.items.splice(matchObj.index, 1)
+                rest.push(rItems[0])
+              }
+              const afIndex = $xetable.findRowIndexOf(afterFullData, row)
+              if (afIndex > -1) {
+                afterFullData.splice(afIndex, 1)
+              }
+              $xetable.updateVirtualTreeData()
+            })
+          } else {
+            rows.forEach((row: any) => {
+              const tfIndex = $xetable.findRowIndexOf(tableFullData, row)
+              if (tfIndex > -1) {
+                const rItems = tableFullData.splice(tfIndex, 1)
+                rest.push(rItems[0])
+              }
+              const afIndex = $xetable.findRowIndexOf(afterFullData, row)
+              if (afIndex > -1) {
+                // 刷新单元格合并
+                mergeList.forEach((mergeItem: any) => {
+                  const { row: mergeRowIndex, rowspan: mergeRowspan } = mergeItem
+                  if (mergeRowIndex > afIndex) {
+                    mergeItem.row = mergeRowIndex - 1
+                  } else if (mergeRowIndex + mergeRowspan > afIndex) {
+                    mergeItem.rowspan = mergeRowspan - 1
+                  }
+                })
+                afterFullData.splice(afIndex, 1)
+              }
+            })
+          }
         }
         // 如果当前行被激活编辑，则清除激活状态
         if (actived.row && $xetable.findRowIndexOf(rows, actived.row) > -1) {
@@ -224,7 +325,7 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
         reactData.scrollYLoad = !treeConfig && sYOpts.gt > -1 && sYOpts.gt < tableFullData.length
         $xetable.updateFooter()
         $xetable.cacheRowMap()
-        $xetable.handleTableData()
+        $xetable.handleTableData(transform)
         $xetable.updateAfterDataIndex()
         $xetable.checkSelectionStatus()
         if (scrollYLoad) {
@@ -280,16 +381,29 @@ const editHook: VxeGlobalHooksHandles.HookOptions = {
        * 获取新增的临时数据
        */
       getInsertRecords () {
+        const { treeConfig } = props
         const { editStore } = reactData
-        const { tableFullData } = internalData
+        const { treeFullData, tableFullData } = internalData
+        const treeOpts = computeTreeOpts.value
         const insertList = editStore.insertList
         const insertRecords: any[] = []
         if (insertList.length) {
-          tableFullData.forEach((row: any) => {
-            if ($xetable.findRowIndexOf(insertList, row) > -1) {
-              insertRecords.push(row)
-            }
-          })
+          // 如果为虚拟树
+          if (treeConfig && treeOpts.transform) {
+            insertList.forEach(row => {
+              const rowid = getRowid($xetable, row)
+              const matchObj = XEUtils.findTree(treeFullData, item => rowid === getRowid($xetable, item), treeOpts)
+              if (matchObj) {
+                insertRecords.push(row)
+              }
+            })
+          } else {
+            insertList.forEach(row => {
+              if ($xetable.findRowIndexOf(tableFullData, row) > -1) {
+                insertRecords.push(row)
+              }
+            })
+          }
         }
         return insertRecords
       },

package/packages/form/src/form.ts

@@ -395,7 +395,7 @@ export default defineComponent({
             callback()
           }
         }).catch(() => {
-          return new Promise<void>((resolve, reject) => {
+          return new Promise<void>((resolve) => {
             showErrTime = window.setTimeout(() => {
               itemList.forEach((item) => {
                 if (item.errRule) {
@@ -412,7 +412,7 @@ export default defineComponent({
               callback(validRest)
               resolve()
             } else {
-              reject(validRest)
+              resolve(validRest)
             }
           })
         })

package/packages/input/src/input.ts

@@ -601,11 +601,18 @@ export default defineComponent({
       return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float')
     })
 
+    function toFloatValueFixed (inputValue: string | number, digitsValue: number) {
+      if (/^-/.test('' + inputValue)) {
+        return XEUtils.toFixed(XEUtils.ceil(inputValue, digitsValue), digitsValue)
+      }
+      return XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue)
+    }
+
     function getNumberValue (val: any) {
       const { type, exponential } = props
       const inpMaxlength = computeInpMaxlength.value
       const digitsValue = computeDigitsValue.value
-      const restVal = (type === 'float' ? XEUtils.toFixed(XEUtils.floor(val, digitsValue), digitsValue) : XEUtils.toValueString(val))
+      const restVal = (type === 'float' ? toFloatValueFixed(val, digitsValue) : XEUtils.toValueString(val))
       if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) {
         return val
       }
@@ -746,7 +753,7 @@ export default defineComponent({
         changeValue()
       } else if (type === 'float') {
         if (inputValue) {
-          const validValue = XEUtils.toFixed(XEUtils.floor(inputValue, digitsValue), digitsValue)
+          const validValue = toFloatValueFixed(inputValue, digitsValue)
           if (inputValue !== validValue) {
             emitModel(validValue, { type: 'init' })
           }

package/packages/table/src/body.ts

@@ -299,6 +299,7 @@ export default defineComponent({
       const radioOpts = computeRadioOpts.value
       const treeOpts = computeTreeOpts.value
       const editOpts = computeEditOpts.value
+      const rowOpts = computeRowOpts.value
       const rows: any[] = []
       tableData.forEach((row: any, $rowIndex: any) => {
         const trOn: any = {}
@@ -311,7 +312,7 @@ export default defineComponent({
         // 确保任何情况下 rowIndex 都精准指向真实 data 索引
         rowIndex = $xetable.getRowIndex(row)
         // 事件绑定
-        if (highlightHoverRow) {
+        if (rowOpts.isHover || highlightHoverRow) {
           trOn.onMouseenter = (evnt: any) => {
             if (isOperateMouse()) {
               return
@@ -428,6 +429,7 @@ export default defineComponent({
       const { highlightHoverRow } = tableProps
       const { scrollXLoad, scrollYLoad } = tableReactData
       const { elemStore, lastScrollTop, lastScrollLeft } = tableInternalData
+      const rowOpts = computeRowOpts.value
       const tableHeader = refTableHeader.value
       const tableBody = refTableBody.value
       const tableFooter = refTableFooter.value
@@ -451,7 +453,7 @@ export default defineComponent({
       tableInternalData.lastScrollTop = scrollTop
       tableInternalData.lastScrollLeft = scrollLeft
       tableInternalData.lastScrollTime = Date.now()
-      if (highlightHoverRow) {
+      if (rowOpts.isHover || highlightHoverRow) {
         $xetable.clearHoverRow()
       }
       if (leftElem && fixedType === 'left') {
@@ -546,6 +548,7 @@ export default defineComponent({
       const { highlightHoverRow } = tableProps
       const { scrollYLoad } = tableReactData
       const { lastScrollTop, lastScrollLeft } = tableInternalData
+      const rowOpts = computeRowOpts.value
       const tableBody = refTableBody.value
       const scrollBodyElem = refElem.value
       const bodyElem = tableBody.$el as HTMLDivElement
@@ -569,7 +572,7 @@ export default defineComponent({
         tableInternalData.lastScrollTop = scrollTop
         tableInternalData.lastScrollLeft = scrollLeft
         tableInternalData.lastScrollTime = Date.now()
-        if (highlightHoverRow) {
+        if (rowOpts.isHover || highlightHoverRow) {
           $xetable.clearHoverRow()
         }
         handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY)