vxe-table 4.1.2 → 4.1.5

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/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)

package/packages/table/src/cell.ts

@@ -312,17 +312,18 @@ export const Cell = {
     const { selectRow } = reactData
     const radioOpts = computeRadioOpts.value
     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 ons
     if (!isHidden) {
       ons = {
         onClick (evnt: Event) {
-          if (!isDisabled) {
+          if (!isDisabled && isVisible) {
             $table.triggerRadioRowEvent(evnt, params)
           }
         }
@@ -331,26 +332,36 @@ export const Cell = {
         isDisabled = !checkMethod({ row })
       }
     }
-    const radioParams = { ...params, checked: isChecked, disabled: isDisabled }
-    return radioSlot ? $table.callSlot(radioSlot, radioParams) : [
-      h('span', {
-        class: ['vxe-cell--radio', {
-          'is--checked': isChecked,
-          'is--disabled': isDisabled
-        }],
-        ...ons
-      }, [
+    const radioParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible }
+    if (radioSlot) {
+      return $table.callSlot(radioSlot, radioParams)
+    }
+    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) : XEUtils.get(row, labelField as string))
-      ] : []))
+      )
+    }
+    return [
+      h('span', {
+        class: ['vxe-cell--radio', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled
+        }],
+        ...ons
+      }, radioVNs)
     ]
   },
   renderTreeRadioCell (params: VxeTableDefines.CellRenderBodyParams) {
@@ -427,19 +438,20 @@ export const Cell = {
     const { selection, treeIndeterminates } = reactData
     const { computeCheckboxOpts } = $table.getComputeMaps()
     const checkboxOpts = computeCheckboxOpts.value
-    const { labelField, checkMethod } = checkboxOpts
+    const { labelField, checkMethod, visibleMethod } = 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 ons
     if (!isHidden) {
       isChecked = $table.findRowIndexOf(selection, row) > -1
       ons = {
         onClick (evnt: MouseEvent) {
-          if (!isDisabled) {
+          if (!isDisabled && isVisible) {
             $table.triggerCheckRowEvent(evnt, params, !isChecked)
           }
         }
@@ -451,16 +463,13 @@ export const Cell = {
         indeterminate = $table.findRowIndexOf(treeIndeterminates, row) > -1
       }
     }
-    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, indeterminate }
-    return checkboxSlot ? $table.callSlot(checkboxSlot, checkboxParams) : [
-      h('span', {
-        class: ['vxe-cell--checkbox', {
-          'is--checked': isChecked,
-          'is--disabled': isDisabled,
-          'is--indeterminate': indeterminate
-        }],
-        ...ons
-      }, [
+    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
+    if (checkboxSlot) {
+      return $table.callSlot(checkboxSlot, checkboxParams)
+    }
+    const checkVNs = []
+    if (isVisible) {
+      checkVNs.push(
         h('span', {
           class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
         }),
@@ -470,11 +479,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) : XEUtils.get(row, labelField as string))
-      ] : []))
+      )
+    }
+    return [
+      h('span', {
+        class: ['vxe-cell--checkbox', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled,
+          'is--indeterminate': indeterminate
+        }],
+        ...ons
+      }, checkVNs)
     ]
   },
   renderTreeSelectionCell (params: VxeTableDefines.CellRenderBodyParams) {
@@ -487,19 +509,20 @@ export const Cell = {
     const { treeIndeterminates } = reactData
     const { computeCheckboxOpts } = $table.getComputeMaps()
     const checkboxOpts = computeCheckboxOpts.value
-    const { labelField, checkField: property, halfField, checkMethod } = checkboxOpts
+    const { labelField, checkField: property, halfField, checkMethod, visibleMethod } = 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 ons
     if (!isHidden) {
       isChecked = XEUtils.get(row, property as string)
       ons = {
         onClick (evnt: MouseEvent) {
-          if (!isDisabled) {
+          if (!isDisabled && isVisible) {
             $table.triggerCheckRowEvent(evnt, params, !isChecked)
           }
         }
@@ -511,16 +534,13 @@ export const Cell = {
         indeterminate = $table.findRowIndexOf(treeIndeterminates, row) > -1
       }
     }
-    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, indeterminate }
-    return checkboxSlot ? $table.callSlot(checkboxSlot, checkboxParams) : [
-      h('span', {
-        class: ['vxe-cell--checkbox', {
-          'is--checked': isChecked,
-          'is--disabled': isDisabled,
-          'is--indeterminate': halfField && !isChecked ? row[halfField] : indeterminate
-        }],
-        ...ons
-      }, [
+    const checkboxParams = { ...params, checked: isChecked, disabled: isDisabled, visible: isVisible, indeterminate }
+    if (checkboxSlot) {
+      return $table.callSlot(checkboxSlot, checkboxParams)
+    }
+    const checkVNs = []
+    if (isVisible) {
+      checkVNs.push(
         h('span', {
           class: 'vxe-checkbox--icon vxe-checkbox--checked-icon'
         }),
@@ -530,11 +550,24 @@ export const Cell = {
         h('span', {
           class: 'vxe-checkbox--icon vxe-checkbox--indeterminate-icon'
         })
-      ].concat(defaultSlot || labelField ? [
-        h('span', {
-          class: 'vxe-checkbox--label'
-        }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField as string))
-      ] : []))
+      )
+      if (defaultSlot || labelField) {
+        checkVNs.push(
+          h('span', {
+            class: 'vxe-checkbox--label'
+          }, defaultSlot ? $table.callSlot(defaultSlot, checkboxParams) : XEUtils.get(row, labelField as string))
+        )
+      }
+    }
+    return [
+      h('span', {
+        class: ['vxe-cell--checkbox', {
+          'is--checked': isChecked,
+          'is--disabled': isDisabled,
+          'is--indeterminate': halfField && !isChecked ? row[halfField] : indeterminate
+        }],
+        ...ons
+      }, checkVNs)
     ]
   },
   renderTreeSelectionCellByProp (params: VxeTableDefines.CellRenderBodyParams) {