vxe-table 3.4.2 → 3.4.3-beta.0

package/packages/edit/src/mixin.js

@@ -3,6 +3,8 @@ import VXETable from '../../v-x-e-table'
 import { UtilTools, DomTools, isEnableConf } from '../../tools'
 import { browse } from '../../tools/src/dom'
 
+const { getRowid } = UtilTools
+
 export default {
   methods: {
     /**
@@ -22,21 +24,51 @@ export default {
      * @param {Row} row 指定行
      */
     _insertAt (records, row) {
-      const { mergeList, afterFullData, editStore, sYOpts, scrollYLoad, tableFullData, treeConfig } = this
+      const { treeFullData, mergeList, afterFullData, editStore, sYOpts, scrollYLoad, tableFullData, treeConfig, fullDataRowIdData, fullAllDataRowIdData, treeOpts } = this
       if (!XEUtils.isArray(records)) {
         records = [records]
       }
       const newRecords = records.map(record => this.defineField(Object.assign({}, record)))
       if (!row) {
-        afterFullData.unshift(...newRecords)
-        tableFullData.unshift(...newRecords)
-        // 刷新单元格合并
-        mergeList.forEach(mergeItem => {
-          const { row: mergeRowIndex } = mergeItem
-          if (mergeRowIndex > 0) {
-            mergeItem.row = mergeRowIndex + newRecords.length
-          }
-        })
+        // 如果为虚拟树
+        if (treeConfig && treeOpts.transform) {
+          newRecords.forEach(item => {
+            const parentRowId = item[treeOpts.parentField]
+            const rowid = getRowid(this, item)
+            if (parentRowId) {
+              const matchObj = XEUtils.findTree(treeFullData, item => parentRowId === item[treeOpts.rowField], treeOpts)
+              if (matchObj) {
+                const { item: parentRow } = matchObj
+                const parentRest = fullAllDataRowIdData[getRowid(this, parentRow)]
+                const parentLevel = parentRest ? parentRest.level : 0
+                let parentChilds = parentRow[treeOpts.children]
+                if (!XEUtils.isArray(parentChilds)) {
+                  parentChilds = parentRow[treeOpts.children] = []
+                }
+                parentChilds.push(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 {
+                // 父节点不存在
+              }
+            } else {
+              afterFullData.unshift(item)
+              treeFullData.unshift(item)
+            }
+          })
+          this.updateVirtualTreeData()
+        } else {
+          afterFullData.unshift(...newRecords)
+          tableFullData.unshift(...newRecords)
+          // 刷新单元格合并
+          mergeList.forEach(mergeItem => {
+            const { row: mergeRowIndex } = mergeItem
+            if (mergeRowIndex > 0) {
+              mergeItem.row = mergeRowIndex + newRecords.length
+            }
+          })
+        }
       } else {
         if (row === -1) {
           afterFullData.push(...newRecords)
@@ -95,7 +127,7 @@ export default {
      * 如果为空则删除所有
      */
     _remove (rows) {
-      const { afterFullData, tableFullData, treeConfig, mergeList, editStore, checkboxOpts, selection, isInsertByRow, sYOpts, scrollYLoad } = this
+      const { afterFullData, tableFullData, treeFullData, treeConfig, mergeList, editStore, checkboxOpts, selection, isInsertByRow, sYOpts, scrollYLoad, treeOpts } = this
       const { actived, removeList, insertList } = editStore
       const { checkField: property } = checkboxOpts
       let rest = []
@@ -126,26 +158,43 @@ export default {
         this.afterFullData = []
         this.clearMergeCells()
       } else {
-        rows.forEach(row => {
-          const tfIndex = tableFullData.indexOf(row)
-          if (tfIndex > -1) {
-            const rItems = tableFullData.splice(tfIndex, 1)
-            rest.push(rItems[0])
-          }
-          const afIndex = afterFullData.indexOf(row)
-          if (afIndex > -1) {
-            // 刷新单元格合并
-            mergeList.forEach(mergeItem => {
-              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 && treeOpts.transform) {
+          rows.forEach((row) => {
+            const rowid = getRowid(this, row)
+            const matchObj = XEUtils.findTree(treeFullData, item => rowid === getRowid(this, item), treeOpts)
+            if (matchObj) {
+              const rItems = matchObj.items.splice(matchObj.index, 1)
+              rest.push(rItems[0])
+            }
+            const afIndex = afterFullData.indexOf(row)
+            if (afIndex > -1) {
+              afterFullData.splice(afIndex, 1)
+            }
+            this.updateVirtualTreeData()
+          })
+        } else {
+          rows.forEach(row => {
+            const tfIndex = tableFullData.indexOf(row)
+            if (tfIndex > -1) {
+              const rItems = tableFullData.splice(tfIndex, 1)
+              rest.push(rItems[0])
+            }
+            const afIndex = afterFullData.indexOf(row)
+            if (afIndex > -1) {
+              // 刷新单元格合并
+              mergeList.forEach(mergeItem => {
+                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 && rows.indexOf(actived.row) > -1) {
@@ -216,14 +265,26 @@ export default {
      * 获取新增的临时数据
      */
     _getInsertRecords () {
+      const { treeConfig, treeFullData, tableFullData, treeOpts } = this
       const insertList = this.editStore.insertList
       const insertRecords = []
       if (insertList.length) {
-        this.tableFullData.forEach(row => {
-          if (insertList.indexOf(row) > -1) {
-            insertRecords.push(row)
-          }
-        })
+        // 如果为虚拟树
+        if (treeConfig && treeOpts.transform) {
+          insertList.forEach(row => {
+            const rowid = getRowid(this, row)
+            const matchObj = XEUtils.findTree(treeFullData, item => rowid === getRowid(this, item), treeOpts)
+            if (matchObj) {
+              insertRecords.push(row)
+            }
+          })
+        } else {
+          insertList.forEach(row => {
+            if (tableFullData.indexOf(row) > -1) {
+              insertRecords.push(row)
+            }
+          })
+        }
       }
       return insertRecords
     },

package/packages/header/src/header.js

@@ -121,7 +121,7 @@ export default {
             if (scrollXLoad && !hasEllipsis) {
               showEllipsis = hasEllipsis = true
             }
-            if (highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
+            if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
               thOns.click = evnt => $xetable.triggerHeaderCellClickEvent(evnt, params)
             }
             if (tableListeners['header-cell-dblclick']) {

package/packages/table/src/body.js

@@ -141,7 +141,7 @@ function renderColumn (h, _vm, $xetable, $seq, seq, rowid, fixedType, rowLevel,
     }
   }
   // 点击事件处理
-  if (highlightCurrentRow ||
+  if ((rowOpts.isCurrent || highlightCurrentRow) ||
     tableListeners['cell-click'] ||
     (editRender && editConfig) ||
     (expandOpts.trigger === 'row' || (expandOpts.trigger === 'cell')) ||
@@ -287,7 +287,8 @@ function renderRows (h, _vm, $xetable, $seq, fixedType, tableData, tableColumn)
     checkboxOpts,
     expandColumn,
     hasFixedColumn,
-    fullAllDataRowIdData
+    fullAllDataRowIdData,
+    rowOpts
   } = $xetable
   const rows = []
   tableData.forEach((row, $rowIndex) => {
@@ -301,7 +302,7 @@ function renderRows (h, _vm, $xetable, $seq, fixedType, tableData, tableColumn)
     // 确保任何情况下 rowIndex 都精准指向真实 data 索引
     rowIndex = $xetable.getRowIndex(row)
     // 事件绑定
-    if (highlightHoverRow) {
+    if (rowOpts.isHover || highlightHoverRow) {
       trOn.mouseenter = evnt => {
         if (isOperateMouse($xetable)) {
           return
@@ -579,7 +580,7 @@ export default {
      */
     scrollEvent (evnt) {
       const { $el: scrollBodyElem, $parent: $xetable, fixedType } = this
-      const { $refs, elemStore, highlightHoverRow, scrollXLoad, scrollYLoad, lastScrollTop, lastScrollLeft } = $xetable
+      const { $refs, elemStore, highlightHoverRow, scrollXLoad, scrollYLoad, lastScrollTop, lastScrollLeft, rowOpts } = $xetable
       const { tableHeader, tableBody, leftBody, rightBody, tableFooter, validTip } = $refs
       const headerElem = tableHeader ? tableHeader.$el : null
       const footerElem = tableFooter ? tableFooter.$el : null
@@ -597,7 +598,7 @@ export default {
       $xetable.lastScrollTop = scrollTop
       $xetable.lastScrollLeft = scrollLeft
       $xetable.lastScrollTime = Date.now()
-      if (highlightHoverRow) {
+      if (rowOpts.isHover || highlightHoverRow) {
         $xetable.clearHoverRow()
       }
       if (leftElem && fixedType === 'left') {
@@ -683,7 +684,7 @@ export default {
     wheelEvent (evnt) {
       const { deltaY, deltaX } = evnt
       const { $el: scrollBodyElem, $parent: $xetable } = this
-      const { $refs, highlightHoverRow, scrollYLoad, lastScrollTop, lastScrollLeft } = $xetable
+      const { $refs, highlightHoverRow, scrollYLoad, lastScrollTop, lastScrollLeft, rowOpts } = $xetable
       const { tableBody } = $refs
       const bodyElem = tableBody.$el
 
@@ -706,7 +707,7 @@ export default {
         $xetable.lastScrollTop = scrollTop
         $xetable.lastScrollLeft = scrollLeft
         $xetable.lastScrollTime = Date.now()
-        if (highlightHoverRow) {
+        if (rowOpts.isHover || highlightHoverRow) {
           $xetable.clearHoverRow()
         }
         this.handleWheel(evnt, isTopWheel, deltaTop, isRollX, isRollY)

package/packages/table/src/methods.js

@@ -2135,7 +2135,7 @@ const Methods = {
     // 该行为只对当前激活的表格有效
     if (this.isActivated) {
       this.preventEvent(evnt, 'event.keydown', null, () => {
-        const { filterStore, isCtxMenu, ctxMenuStore, editStore, editOpts, editConfig, mouseConfig, mouseOpts, keyboardConfig, keyboardOpts, treeConfig, treeOpts, highlightCurrentRow, currentRow, bodyCtxMenu } = this
+        const { filterStore, isCtxMenu, ctxMenuStore, editStore, editOpts, editConfig, mouseConfig, mouseOpts, keyboardConfig, keyboardOpts, treeConfig, treeOpts, highlightCurrentRow, currentRow, bodyCtxMenu, rowOpts } = this
         const { selected, actived } = editStore
         const { keyCode } = evnt
         const isBack = keyCode === 8
@@ -2198,7 +2198,7 @@ const Methods = {
           this.keyCtxTimeout = setTimeout(() => {
             this._keyCtx = false
           }, 1000)
-        } else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && highlightCurrentRow && currentRow))) {
+        } else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
           // 退出选中
           if (hasCtrlKey) {
             // 如果是激活编辑状态，则取消编辑
@@ -2227,7 +2227,7 @@ const Methods = {
                   this.moveSelected(targetArgs, isLeftArrow, false, isRightArrow, true, evnt)
                 }
               }
-            } else if (treeConfig && highlightCurrentRow && currentRow) {
+            } else if (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
               // 如果是树形表格当前行回车移动到子节点
               const childrens = currentRow[treeOpts.children]
               if (childrens && childrens.length) {
@@ -2245,7 +2245,7 @@ const Methods = {
             // 如果按下了方向键
             if (selected.row && selected.column) {
               this.moveSelected(selected.args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt)
-            } else if ((isUpArrow || isDwArrow) && highlightCurrentRow) {
+            } else if ((isUpArrow || isDwArrow) && (rowOpts.isCurrent || highlightCurrentRow)) {
               // 当前行按键上下移动
               this.moveCurrentRow(isUpArrow, isDwArrow, evnt)
             }
@@ -2257,7 +2257,7 @@ const Methods = {
           } else if (actived.row || actived.column) {
             this.moveTabSelected(actived.args, hasShiftKey, evnt)
           }
-        } else if (keyboardConfig && (isDel || (treeConfig && highlightCurrentRow && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
+        } else if (keyboardConfig && (isDel || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow ? isBack && keyboardOpts.isArrow : isBack))) {
           if (!isEditStatus) {
             const { delMethod, backMethod } = keyboardOpts
             // 如果是删除键
@@ -2289,7 +2289,7 @@ const Methods = {
                 // 如果按下 del 键，更新表尾数据
                 this.updateFooter()
               }
-            } else if (isBack && keyboardOpts.isArrow && treeConfig && highlightCurrentRow && currentRow) {
+            } else if (isBack && keyboardOpts.isArrow && treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
               // 如果树形表格回退键关闭当前行返回父节点
               const { parent: parentRow } = XEUtils.findTree(this.afterFullData, item => item === currentRow, treeOpts)
               if (parentRow) {
@@ -3052,11 +3052,11 @@ const Methods = {
    * @param {Row} row 行对象
    */
   setCurrentRow (row) {
-    const { $el } = this
+    const { $el, rowOpts } = this
     this.clearCurrentRow()
     this.clearCurrentColumn()
     this.currentRow = row
-    if (this.highlightCurrentRow) {
+    if (rowOpts.isCurrent || this.highlightCurrentRow) {
       if ($el) {
         XEUtils.arrayEach($el.querySelectorAll(`[rowid="${getRowid(this, row)}"]`), elem => addClass(elem, 'row--current'))
       }
@@ -3102,7 +3102,7 @@ const Methods = {
    * 用于当前行，获取当前行的数据
    */
   getCurrentRecord () {
-    return this.highlightCurrentRow ? this.currentRow : null
+    return this.rowOpts.isCurrent || this.highlightCurrentRow ? this.currentRow : null
   },
   /**
    * 用于单选行，获取当已选中的数据
@@ -3164,7 +3164,7 @@ const Methods = {
       this.triggerSortEvent(evnt, column, getNextSortOrder(this, column))
     }
     this.emitEvent('header-cell-click', Object.assign({ triggerResizable, triggerSort, triggerFilter, cell }, params), evnt)
-    if (this.highlightCurrentColumn) {
+    if (this.columnOpts.isCurrent || this.highlightCurrentColumn) {
       return this.setCurrentColumn(column)
     }
     return this.$nextTick()
@@ -3173,7 +3173,7 @@ const Methods = {
     this.emitEvent('header-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, params), evnt)
   },
   getCurrentColumn () {
-    return this.highlightCurrentColumn ? this.currentColumn : null
+    return this.columnOpts.isCurrent || this.highlightCurrentColumn ? this.currentColumn : null
   },
   /**
    * 用于当前列，设置某列行为高亮状态
@@ -3220,7 +3220,7 @@ const Methods = {
    * 如果是双击模式，则单击后选中状态
    */
   triggerCellClickEvent (evnt, params) {
-    const { highlightCurrentRow, editStore, radioOpts, expandOpts, treeOpts, editConfig, editOpts, checkboxOpts } = this
+    const { highlightCurrentRow, editStore, radioOpts, expandOpts, treeOpts, editConfig, editOpts, checkboxOpts, rowOpts } = this
     const { actived } = editStore
     const { row, column } = params
     const { type, treeNode } = column
@@ -3247,7 +3247,7 @@ const Methods = {
     if (!triggerTreeNode) {
       if (!triggerExpandNode) {
         // 如果是高亮行
-        if (highlightCurrentRow) {
+        if (rowOpts.isCurrent || highlightCurrentRow) {
           if (!triggerCheckbox && !triggerRadio) {
             this.triggerCurrentRowEvent(evnt, params)
           }
@@ -3843,8 +3843,10 @@ const Methods = {
   updateVirtualTreeData () {
     const { scrollYLoad: oldScrollYLoad, treeExpandeds, treeOpts, treeFullData } = this
     const fullData = []
+    const expandMaps = new Map()
     XEUtils.eachTree(treeFullData, (row, index, items, path, parent) => {
-      if (!parent || treeExpandeds.indexOf(parent) > -1) {
+      if (!parent || (expandMaps.has(parent) && treeExpandeds.indexOf(parent) > -1)) {
+        expandMaps.set(row, 1)
         fullData.push(row)
       }
     }, treeOpts)

package/packages/table/src/table.js

@@ -976,7 +976,9 @@ export default {
       ctxMenuStore,
       ctxMenuOpts,
       footerTableData,
-      hasTip
+      hasTip,
+      columnOpts,
+      rowOpts
     } = this
     const { leftList, rightList } = columnStore
     return h('div', {
@@ -985,8 +987,8 @@ export default {
         'cell--highlight': highlightCell,
         'cell--selected': mouseConfig && mouseOpts.selected,
         'cell--area': mouseConfig && mouseOpts.area,
-        'row--highlight': highlightHoverRow,
-        'column--highlight': highlightHoverColumn,
+        'row--highlight': rowOpts.isHover || highlightHoverRow,
+        'column--highlight': columnOpts.isHover || highlightHoverColumn,
         'is--header': showHeader,
         'is--footer': showFooter,
         'is--group': isGroup,

package/types/index.d.ts

@@ -1,7 +1,7 @@
 import * as VXETableExport from './all'
 
 /**
- * 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...  
+ * 一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...  
  */
 declare const VXETable: typeof VXETableExport