vxe-table 3.4.0 → 3.4.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vxe-table",
-  "version": "3.4.0",
-  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
+  "version": "3.4.3",
+  "description": "一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...",
   "scripts": {
     "serve": "vue-cli-service serve",
     "lint": "vue-cli-service lint",

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/cell.js

@@ -291,17 +291,18 @@ export const Cell = {
     const { $table, column, isHidden } = params
     const { radioOpts, selectRow } = $table
     const { slots } = column
-    const { labelField, checkMethod } = radioOpts
+    const { labelField, checkMethod, visibleMethod } = radioOpts
     const { row } = params
     const defaultSlot = slots ? slots.default : null
     const radioSlot = slots ? slots.radio : null
     const isChecked = row === selectRow
+    const isVisible = !visibleMethod || visibleMethod({ row })
     let isDisabled = !!checkMethod
     let on
     if (!isHidden) {
       on = {
         click (evnt) {
-          if (!isDisabled) {
+          if (!isDisabled && isVisible) {
             $table.triggerRadioRowEvent(evnt, params)
           }
         }
@@ -310,26 +311,36 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
     }
-    const radioParams = { ...params, checked: isChecked, disabled: isDisabled }
-    return radioSlot ? $table.callSlot(radioSlot, radioParams, h) : [
-      h('span', {
-        class: ['vxe-cell--radio', {
-          'is--checked': isChecked,
-          'is--disabled': isDisabled
-        }],
-        on
-      }, [
+    const radioParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible }
+    if (radioSlot) {
+      return $table.callSlot(radioSlot, radioParams, h)
+    }
+    const radioVNs = []
+    if (isVisible) {
+      radioVNs.push(
         h('span', {
           class: 'vxe-radio--icon vxe-radio--checked-icon'
         }),
         h('span', {
           class: 'vxe-radio--icon vxe-radio--unchecked-icon'
         })
-      ].concat(defaultSlot || labelField ? [
+      )
+    }
+    if (defaultSlot || labelField) {
+      radioVNs.push(
         h('span', {
           class: 'vxe-radio--label'
         }, defaultSlot ? $table.callSlot(defaultSlot, radioParams, h) : XEUtils.get(row, labelField))
-      ] : []))
+      )
+    }
+    return [
+      h('span', {
+        class: ['vxe-cell--radio', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled
+        }],
+        on
+      }, radioVNs)
     ]
   },
   renderTreeRadioCell (h, params) {
@@ -401,19 +412,20 @@ export const Cell = {
   renderSelectionCell (h, params) {
     const { $table, row, column, isHidden } = params
     const { treeConfig, treeIndeterminates } = $table
-    const { labelField, checkMethod } = $table.checkboxOpts
+    const { labelField, checkMethod, visibleMethod } = $table.checkboxOpts
     const { slots } = column
     const defaultSlot = slots ? slots.default : null
     const checkboxSlot = slots ? slots.checkbox : null
     let indeterminate = false
     let isChecked = false
+    const isVisible = !visibleMethod || visibleMethod({ row })
     let isDisabled = !!checkMethod
     let on
     if (!isHidden) {
       isChecked = $table.selection.indexOf(row) > -1
       on = {
         click (evnt) {
-          if (!isDisabled) {
+          if (!isDisabled && isVisible) {
             $table.triggerCheckRowEvent(evnt, params, !isChecked)
           }
         }
@@ -425,16 +437,13 @@ export const Cell = {
         indeterminate = treeIndeterminates.indexOf(row) > -1
       }
     }
-    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, indeterminate }
-    return checkboxSlot ? $table.callSlot(checkboxSlot, checkboxParams, h) : [
-      h('span', {
-        class: ['vxe-cell--checkbox', {
-          'is--checked': isChecked,
-          'is--disabled': isDisabled,
-          'is--indeterminate': indeterminate
-        }],
-        on
-      }, [
+    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
+    if (checkboxSlot) {
+      return $table.callSlot(checkboxSlot, checkboxParams, h)
+    }
+    const checkVNs = []
+    if (isVisible) {
+      checkVNs.push(
         h('span', {
           class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
         }),
@@ -444,11 +453,24 @@ export const Cell = {
         h('span', {
           class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
         })
-      ].concat(defaultSlot || labelField ? [
+      )
+    }
+    if (defaultSlot || labelField) {
+      checkVNs.push(
         h('span', {
           class: 'vxe-checkbox--label'
         }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField))
-      ] : []))
+      )
+    }
+    return [
+      h('span', {
+        class: ['vxe-cell--checkbox', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled,
+          'is--indeterminate': indeterminate
+        }],
+        on
+      }, checkVNs)
     ]
   },
   renderTreeSelectionCell (h, params) {
@@ -457,19 +479,20 @@ export const Cell = {
   renderSelectionCellByProp (h, params) {
     const { $table, row, column, isHidden } = params
     const { treeConfig, treeIndeterminates } = $table
-    const { labelField, checkField: property, halfField, checkMethod } = $table.checkboxOpts
+    const { labelField, checkField: property, halfField, checkMethod, visibleMethod } = $table.checkboxOpts
     const { slots } = column
     const defaultSlot = slots ? slots.default : null
     const checkboxSlot = slots ? slots.checkbox : null
     let indeterminate = false
     let isChecked = false
+    const isVisible = !visibleMethod || visibleMethod({ row })
     let isDisabled = !!checkMethod
     let on
     if (!isHidden) {
       isChecked = XEUtils.get(row, property)
       on = {
         click (evnt) {
-          if (!isDisabled) {
+          if (!isDisabled && isVisible) {
             $table.triggerCheckRowEvent(evnt, params, !isChecked)
           }
         }
@@ -481,16 +504,13 @@ export const Cell = {
         indeterminate = treeIndeterminates.indexOf(row) > -1
       }
     }
-    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, indeterminate }
-    return checkboxSlot ? $table.callSlot(checkboxSlot, checkboxParams, h) : [
-      h('span', {
-        class: ['vxe-cell--checkbox', {
-          'is--checked': isChecked,
-          'is--disabled': isDisabled,
-          'is--indeterminate': halfField && !isChecked ? row[halfField] : indeterminate
-        }],
-        on
-      }, [
+    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
+    if (checkboxSlot) {
+      return $table.callSlot(checkboxSlot, checkboxParams, h)
+    }
+    const checkVNs = []
+    if (isVisible) {
+      checkVNs.push(
         h('span', {
           class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
         }),
@@ -500,11 +520,24 @@ export const Cell = {
         h('span', {
           class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
         })
-      ].concat(defaultSlot || labelField ? [
+      )
+    }
+    if (defaultSlot || labelField) {
+      checkVNs.push(
         h('span', {
           class: 'vxe-checkbox--label'
         }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams, h) : XEUtils.get(row, labelField))
-      ] : []))
+      )
+    }
+    return [
+      h('span', {
+        class: ['vxe-cell--checkbox', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled,
+          'is--indeterminate': halfField && !isChecked ? row[halfField] : indeterminate
+        }],
+        on
+      }, checkVNs)
     ]
   },
   renderTreeSelectionCellByProp (h, params) {