vxe-table 3.4.0 → 3.4.3

package/packages/table/src/methods.js

@@ -325,11 +325,11 @@ const Methods = {
       // 树结构自动转换
       if (treeOpts.transform) {
         if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-          if (!treeOpts.rowtKey) {
-            UtilTools.error('vxe.error.reqProp', ['table.tree-config.rowtKey'])
+          if (!treeOpts.rowField) {
+            UtilTools.error('vxe.error.reqProp', ['table.tree-config.rowField'])
           }
-          if (!treeOpts.parentKey) {
-            UtilTools.error('vxe.error.reqProp', ['table.tree-config.parentKey'])
+          if (!treeOpts.parentField) {
+            UtilTools.error('vxe.error.reqProp', ['table.tree-config.parentField'])
           }
           if (!treeOpts.children) {
             UtilTools.error('vxe.error.reqProp', ['tree-config.children'])
@@ -340,7 +340,7 @@ const Methods = {
             }
           })
         }
-        treeData = XEUtils.toArrayTree(fullData, { key: treeOpts.rowtKey, parentKey: treeOpts.parentKey, children: treeOpts.children })
+        treeData = XEUtils.toArrayTree(fullData, { key: treeOpts.rowField, parentKey: treeOpts.parentField, children: treeOpts.children })
         fullData = treeData.slice(0)
       } else {
         treeData = fullData.slice(0)
@@ -464,16 +464,12 @@ const Methods = {
       const oRow = tableSourceData[rowIndex]
       if (oRow && row) {
         if (field) {
-          XEUtils.set(oRow, field, XEUtils.get(record || row, field))
+          const newValue = XEUtils.get(record || row, field)
+          XEUtils.set(row, field, newValue)
+          XEUtils.set(oRow, field, newValue)
         } else {
-          if (record) {
-            tableSourceData[rowIndex] = record
-            XEUtils.clear(row, undefined)
-            Object.assign(row, this.defineField(Object.assign({}, record)))
-            this.cacheRowMap(true)
-          } else {
-            XEUtils.destructuring(oRow, XEUtils.clone(row, true))
-          }
+          const newRecord = XEUtils.clone({ ...record }, true)
+          XEUtils.destructuring(oRow, Object.assign(row, newRecord))
         }
       }
       this.tableData = tableData.slice(0)
@@ -2135,7 +2131,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 +2194,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 +2223,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 +2241,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 +2253,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 +2285,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 +3048,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 +3098,7 @@ const Methods = {
    * 用于当前行，获取当前行的数据
    */
   getCurrentRecord () {
-    return this.highlightCurrentRow ? this.currentRow : null
+    return this.rowOpts.isCurrent || this.highlightCurrentRow ? this.currentRow : null
   },
   /**
    * 用于单选行，获取当已选中的数据
@@ -3164,7 +3160,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 +3169,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 +3216,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 +3243,7 @@ const Methods = {
     if (!triggerTreeNode) {
       if (!triggerExpandNode) {
         // 如果是高亮行
-        if (highlightCurrentRow) {
+        if (rowOpts.isCurrent || highlightCurrentRow) {
           if (!triggerCheckbox && !triggerRadio) {
             this.triggerCurrentRowEvent(evnt, params)
           }
@@ -3487,7 +3483,7 @@ const Methods = {
    * 重新懒加载展开行，并展开内容
    * @param {Row} row 行对象
    */
-  lazyExpandContent (row) {
+  reloadRowExpand (row) {
     const { expandOpts, expandLazyLoadeds } = this
     const { lazy } = expandOpts
     if (lazy && expandLazyLoadeds.indexOf(row) === -1) {
@@ -3498,10 +3494,10 @@ const Methods = {
   },
   reloadExpandContent (row) {
     if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-      UtilTools.warn('vxe.error.delFunc', ['reloadExpandContent', 'lazyExpandContent'])
+      UtilTools.warn('vxe.error.delFunc', ['reloadExpandContent', 'reloadRowExpand'])
     }
     // 即将废弃
-    return this.lazyExpandContent(row)
+    return this.reloadRowExpand(row)
   },
   /**
    * 展开行事件
@@ -3686,7 +3682,7 @@ const Methods = {
    * 重新懒加载树节点，并展开该节点
    * @param {Row} row 行对象
    */
-  lazyTreeChildren (row) {
+  reloadTreeExpand (row) {
     const { treeOpts, treeLazyLoadeds } = this
     const { transform, lazy, hasChild } = treeOpts
     if (lazy && row[hasChild] && treeLazyLoadeds.indexOf(row) === -1) {
@@ -3704,10 +3700,10 @@ const Methods = {
   },
   reloadTreeChilds (row) {
     if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
-      UtilTools.warn('vxe.error.delFunc', ['reloadTreeChilds', 'lazyTreeChildren'])
+      UtilTools.warn('vxe.error.delFunc', ['reloadTreeChilds', 'reloadTreeExpand'])
     }
     // 即将废弃
-    return this.lazyTreeChildren(row)
+    return this.reloadTreeExpand(row)
   },
   /**
    * 展开树节点事件
@@ -3843,8 +3839,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/packages/v-x-e-table/src/conf.js

@@ -63,8 +63,8 @@ export default {
       showIcon: true
     },
     treeConfig: {
-      rowtKey: 'id',
-      parentKey: 'parentId',
+      rowField: 'id',
+      parentField: 'parentId',
       children: 'children',
       hasChild: 'hasChild',
       indent: 20,

package/types/index.d.ts

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

package/types/table.d.ts

@@ -634,7 +634,7 @@ export declare class Table extends VXETableComponent {
    * 用于懒加载展开行，重新加载展开行的内容
    * @param rows 指定行
    */
-  reloadExpandContent(rows: RowInfo | RowInfo[]): Promise<any>;
+  reloadRowExpand(rows: RowInfo | RowInfo[]): Promise<any>;
   /**
    * 用于 type=expand，切换展开行的状态
    * @param row 指定行
@@ -859,9 +859,9 @@ export declare class Table extends VXETableComponent {
    */
   clearActived(): Promise<any>;
   /**
-   * 用于 mouse-config.area，用于清除鼠标选择的区域
+   * 用于 mouse-config.area，用于清除鼠标选择的区域，可以指定清除的区域
    */
-  clearCellAreas(): Promise<any>;
+  clearCellAreas(area?: number | MouseCellArea): Promise<any>;
   /**
    * 用于 edit-config，获取已激活的行数据
    */
@@ -901,9 +901,9 @@ export declare class Table extends VXETableComponent {
    * @param areaConfigs 指定区域
    */
   setCellAreas(areaConfigs: CellAreaConfig[], activeArea?: {
-    area?: MouseCellArea;
-    column: ColumnInfo;
-    row: RowInfo;
+    area?: number | MouseCellArea;
+    column?: number | ColumnInfo;
+    row?: number | RowInfo;
   }): Promise<any>;
   /**
    * 用于 mouse-config.area，设置活动的区域的单元格
@@ -911,8 +911,8 @@ export declare class Table extends VXETableComponent {
    */
   setActiveCellArea(activeArea: {
     area: MouseCellArea;
-    column: ColumnInfo;
-    row: RowInfo;
+    column: number | ColumnInfo;
+    row: number | RowInfo;
   }): Promise<any>;
   /**
    * 临时合并单元格，如果为数组则合并多个