vxe-table 3.19.39 → 3.20.0-beta.1

package/packages/table/module/validator/mixin.ts

@@ -5,6 +5,7 @@ import { scrollToView } from '../../../ui/src/dom'
 import { handleFieldOrColumn, getRowid } from '../../src/util'
 import { warnLog, errLog } from '../../../ui/src/log'
 
+import type { VxeTooltipInstance } from 'vxe-pc-ui'
 import type { VxeTableDefines, TableInternalData, TableReactData, VxeTableConstructor, VxeTablePrivateMethods } from '../../../../types'
 
 const { getConfig, validators } = VxeUI
@@ -141,240 +142,254 @@ function checkRuleStatus (rule: VxeTableDefines.ValidatorRule, val: any) {
   return true
 }
 
+/**
+ * 聚焦到校验通过的单元格并弹出校验错误提示
+ */
+function handleValidError ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, params: any) {
+  return new Promise<void>(resolve => {
+    const validOpts = $xeTable.computeValidOpts
+    if (validOpts.autoPos === false) {
+      $xeTable.dispatchEvent('valid-error', params, null)
+      resolve()
+    } else {
+      $xeTable.handleEdit(params, { type: 'valid-error', trigger: 'call' }).then(() => {
+        setTimeout(() => {
+          resolve($xeTable.showValidTooltip(params))
+        }, 10)
+      })
+    }
+  })
+}
+
+function handleErrMsgMode ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, validErrMaps: any) {
+  const validOpts = $xeTable.computeValidOpts
+  if (validOpts.msgMode === 'single') {
+    const keys = Object.keys(validErrMaps)
+    const resMaps: Record<string, {
+      row: any;
+      column: any;
+      rule: any;
+      content: any;
+    }> = {}
+    if (keys.length) {
+      const firstKey = keys[0]
+      resMaps[firstKey] = validErrMaps[firstKey]
+    }
+    return resMaps
+  }
+  return validErrMaps
+}
+
+/**
+ * 对表格数据进行校验
+ * 如果不指定数据，则默认只校验临时变动的数据，例如新增或修改
+ * 如果传 true 则校验当前表格数据
+ * 如果传 row 指定行记录，则只验证传入的行
+ * 如果传 rows 为多行记录，则只验证传入的行
+ * 如果只传 callback 否则默认验证整个表格数据
+ * 返回 Promise 对象，或者使用回调方式
+ */
+function beginValidate ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, rows: any, cols: VxeTableDefines.ColumnInfo[] | null, cb: any, isFull?: boolean) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+
+  const validRest: any = {}
+  const { editRules, treeConfig } = props
+  const { isRowGroupStatus } = reactData
+  const { afterFullData, pendingRowMaps, removeRowMaps } = internalData
+  const treeOpts = $xeTable.computeTreeOpts
+  const aggregateOpts = $xeTable.computeAggregateOpts
+  const validOpts = $xeTable.computeValidOpts
+  let validList
+  if (rows === true) {
+    validList = afterFullData
+  } else if (rows) {
+    if (XEUtils.isFunction(rows)) {
+      cb = rows
+    } else {
+      validList = XEUtils.isArray(rows) ? rows : [rows]
+    }
+  }
+  if (!validList) {
+    validList = $xeTable.getInsertRecords().concat($xeTable.getUpdateRecords())
+  }
+  const rowValidErrs: any = []
+  internalData._lastCallTime = Date.now()
+  internalData.validRuleErr = false // 如果为快速校验，当存在某列校验不通过时将终止执行
+  $xeTable.clearValidate()
+  const validErrMaps: Record<string, {
+    row: any;
+    column: any;
+    rule: any;
+    content: any;
+  }> = {}
+  if (editRules) {
+    const columns = cols && cols.length ? cols : $xeTable.getColumns()
+    const handleVaild = (row: any) => {
+      const rowid = getRowid($xeTable, row)
+      // 是否删除
+      if (removeRowMaps[rowid]) {
+        return
+      }
+      // 是否标记删除
+      if (pendingRowMaps[rowid]) {
+        return
+      }
+      if ($xeTable.isAggregateRecord(row)) {
+        return
+      }
+      if (isFull || !internalData.validRuleErr) {
+        const colVailds: any[] = []
+        columns.forEach((column: any) => {
+          const field = XEUtils.isString(column) ? column : column.field
+          if ((isFull || !internalData.validRuleErr) && XEUtils.has(editRules, field)) {
+            colVailds.push(
+              $xeTable.validCellRules('all', row, column)
+                .catch(({ rule, rules }: any) => {
+                  const rest = {
+                    rule,
+                    rules,
+                    rowIndex: $xeTable.getRowIndex(row),
+                    row,
+                    columnIndex: $xeTable.getColumnIndex(column),
+                    column,
+                    field,
+                    $table: $xeTable
+                  }
+                  if (!validRest[field]) {
+                    validRest[field] = []
+                  }
+                  validErrMaps[`${getRowid($xeTable, row)}:${column.id}`] = {
+                    column,
+                    row,
+                    rule,
+                    content: rule.content
+                  }
+                  validRest[field].push(rest)
+                  if (!isFull) {
+                    internalData.validRuleErr = true
+                    return Promise.reject(rest)
+                  }
+                })
+            )
+          }
+        })
+        rowValidErrs.push(Promise.all(colVailds))
+      }
+    }
+    if (isRowGroupStatus) {
+      XEUtils.eachTree(validList, handleVaild, { children: aggregateOpts.mapChildrenField })
+    } else if (treeConfig) {
+      const childrenField = treeOpts.children || treeOpts.childrenField
+      XEUtils.eachTree(validList, handleVaild, { children: childrenField })
+    } else {
+      validList.forEach(handleVaild)
+    }
+    return Promise.all(rowValidErrs).then(() => {
+      const ruleProps = Object.keys(validRest)
+      reactData.validErrorMaps = handleErrMsgMode($xeTable, validErrMaps)
+      return $xeTable.$nextTick().then(() => {
+        if (ruleProps.length) {
+          return Promise.reject(validRest[ruleProps[0]][0])
+        }
+        if (cb) {
+          cb()
+        }
+      })
+    }).catch(firstErrParams => {
+      return new Promise<void>((resolve, reject) => {
+        const finish = () => {
+          $xeTable.$nextTick(() => {
+            if (cb) {
+              cb(validRest)
+              resolve()
+            } else {
+              if (getConfig().validToReject === 'obsolete') {
+                // 已废弃，校验失败将不会执行catch
+                reject(validRest)
+              } else {
+                resolve(validRest)
+              }
+            }
+          })
+        }
+        const posAndFinish = () => {
+          firstErrParams.cell = $xeTable.getCellElement(firstErrParams.row, firstErrParams.column)
+          scrollToView(firstErrParams.cell)
+          handleValidError($xeTable, firstErrParams).then(finish)
+        }
+        /**
+         * 当校验不通过时
+         * 将表格滚动到可视区
+         * 由于提示信息至少需要占一行，定位向上偏移一行
+         */
+        if (validOpts.autoPos === false) {
+          finish()
+        } else {
+          const row = firstErrParams.row
+          const column = firstErrParams.column
+          $xeTable.scrollToRow(row, column).then(posAndFinish)
+        }
+      })
+    })
+  } else {
+    reactData.validErrorMaps = {}
+  }
+  return $xeTable.$nextTick().then(() => {
+    if (cb) {
+      cb()
+    }
+  })
+}
+
 export default {
   methods: {
     /**
      * 完整校验，和 validate 的区别就是会给有效数据中的每一行进行校验
      */
     _fullValidate (rows: any, cb: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       if (XEUtils.isFunction(cb)) {
         warnLog('vxe.error.notValidators', ['fullValidate(rows, callback)', 'fullValidate(rows)'])
       }
-      return this.beginValidate(rows, null, cb, true)
+      return beginValidate($xeTable, rows, null, cb, true)
     },
     /**
      * 快速校验，如果存在记录不通过的记录，则返回不再继续校验（异步校验除外）
      */
     _validate (rows: any, cb: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       if (XEUtils.isFunction(cb)) {
         warnLog('vxe.error.notValidators', ['validate(rows, callback)', 'validate(rows)'])
       }
-      return this.beginValidate(rows, null, cb)
+      return beginValidate($xeTable, rows, null, cb)
     },
     /**
      * 完整校验单元格，和 validateField 的区别就是会给有效数据中的每一行进行校验
      */
     _fullValidateField (rows: any, fieldOrColumn: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
       const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : [])).map(column => handleFieldOrColumn(this, column))
       if (colList.length) {
-        return this.beginValidate(rows, colList, null, true)
+        return beginValidate($xeTable, rows, colList, null, true)
       }
-      return this.$nextTick()
+      return $xeTable.$nextTick()
     },
     /**
      * 快速校验单元格，如果存在记录不通过的记录，则返回不再继续校验（异步校验除外）
      */
     _validateField (rows: any, fieldOrColumn: any) {
-      const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : [])).map(column => handleFieldOrColumn(this, column))
-      if (colList.length) {
-        return this.beginValidate(rows, colList, null)
-      }
-      return this.$nextTick()
-    },
-    /**
-     * 聚焦到校验通过的单元格并弹出校验错误提示
-     */
-    handleValidError (params: any) {
-      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-
-      const { validOpts } = this
-      return new Promise<void>(resolve => {
-        if (validOpts.autoPos === false) {
-          $xeTable.dispatchEvent('valid-error', params, null)
-          resolve()
-        } else {
-          this.handleEdit(params, { type: 'valid-error', trigger: 'call' }).then(() => {
-            setTimeout(() => {
-              resolve(this.showValidTooltip(params))
-            }, 10)
-          })
-        }
-      })
-    },
-    handleErrMsgMode (validErrMaps: any) {
-      const { validOpts } = this
-      if (validOpts.msgMode === 'single') {
-        const keys = Object.keys(validErrMaps)
-        const resMaps: Record<string, {
-          row: any;
-          column: any;
-          rule: any;
-          content: any;
-        }> = {}
-        if (keys.length) {
-          const firstKey = keys[0]
-          resMaps[firstKey] = validErrMaps[firstKey]
-        }
-        return resMaps
-      }
-      return validErrMaps
-    },
-    /**
-     * 对表格数据进行校验
-     * 如果不指定数据，则默认只校验临时变动的数据，例如新增或修改
-     * 如果传 true 则校验当前表格数据
-     * 如果传 row 指定行记录，则只验证传入的行
-     * 如果传 rows 为多行记录，则只验证传入的行
-     * 如果只传 callback 否则默认验证整个表格数据
-     * 返回 Promise 对象，或者使用回调方式
-     */
-    beginValidate (rows: any, cols: VxeTableDefines.ColumnInfo[] | null, cb: any, isFull: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-      const props = $xeTable
-      const reactData = $xeTable as unknown as TableReactData
-      const internalData = $xeTable as unknown as TableInternalData
 
-      const validRest: any = {}
-      const { editRules, treeConfig } = props
-      const { isRowGroupStatus } = reactData
-      const { afterFullData, pendingRowMaps, removeRowMaps } = internalData
-      const treeOpts = $xeTable.computeTreeOpts
-      const aggregateOpts = $xeTable.computeAggregateOpts
-      let validList
-      if (rows === true) {
-        validList = afterFullData
-      } else if (rows) {
-        if (XEUtils.isFunction(rows)) {
-          cb = rows
-        } else {
-          validList = XEUtils.isArray(rows) ? rows : [rows]
-        }
-      }
-      if (!validList) {
-        validList = this.getInsertRecords().concat(this.getUpdateRecords())
-      }
-      const rowValidErrs: any[] = []
-      this.lastCallTime = Date.now()
-      this.validRuleErr = false // 如果为快速校验，当存在某列校验不通过时将终止执行
-      this.clearValidate()
-      const validErrMaps: any = {}
-      if (editRules) {
-        const columns = cols && cols.length ? cols : this.getColumns()
-        const handleVaild = (row: any) => {
-          const rowid = getRowid($xeTable, row)
-          // 是否删除
-          if (removeRowMaps[rowid]) {
-            return
-          }
-          // 是否标记删除
-          if (pendingRowMaps[rowid]) {
-            return
-          }
-          if ($xeTable.isAggregateRecord(row)) {
-            return
-          }
-          if (isFull || !this.validRuleErr) {
-            const colVailds: any[] = []
-            columns.forEach((column: any) => {
-              const field = XEUtils.isString(column) ? column : column.field
-              if ((isFull || !this.validRuleErr) && XEUtils.has(editRules, field)) {
-                colVailds.push(
-                  this.validCellRules('all', row, column)
-                    .catch(({ rule, rules }: any) => {
-                      const rest = {
-                        rule,
-                        rules,
-                        rowIndex: this.getRowIndex(row),
-                        row,
-                        columnIndex: this.getColumnIndex(column),
-                        column,
-                        field,
-                        $table: this
-                      }
-                      if (!validRest[field]) {
-                        validRest[field] = []
-                      }
-                      validErrMaps[`${getRowid(this, row)}:${column.id}`] = {
-                        column,
-                        row,
-                        rule,
-                        content: rule.content
-                      }
-                      validRest[field].push(rest)
-                      if (!isFull) {
-                        this.validRuleErr = true
-                        return Promise.reject(rest)
-                      }
-                    })
-                )
-              }
-            })
-            rowValidErrs.push(Promise.all(colVailds))
-          }
-        }
-        if (isRowGroupStatus) {
-          XEUtils.eachTree(validList, handleVaild, { children: aggregateOpts.mapChildrenField })
-        } else if (treeConfig) {
-          const childrenField = treeOpts.children || treeOpts.childrenField
-          XEUtils.eachTree(validList, handleVaild, { children: childrenField })
-        } else {
-          validList.forEach(handleVaild)
-        }
-        return Promise.all(rowValidErrs).then(() => {
-          const ruleProps = Object.keys(validRest)
-          this.validErrorMaps = this.handleErrMsgMode(validErrMaps)
-          return this.$nextTick().then(() => {
-            if (ruleProps.length) {
-              return Promise.reject(validRest[ruleProps[0]][0])
-            }
-            if (cb) {
-              cb()
-            }
-          })
-        }).catch(firstErrParams => {
-          return new Promise<void>((resolve, reject) => {
-            const finish = () => {
-              this.$nextTick(() => {
-                if (cb) {
-                  cb(validRest)
-                  resolve()
-                } else {
-                  if (getConfig().validToReject === 'obsolete') {
-                    // 已废弃，校验失败将不会执行catch
-                    reject(validRest)
-                  } else {
-                    resolve(validRest)
-                  }
-                }
-              })
-            }
-            const posAndFinish = () => {
-              firstErrParams.cell = this.getCellElement(firstErrParams.row, firstErrParams.column)
-              scrollToView(firstErrParams.cell)
-              this.handleValidError(firstErrParams).then(finish)
-            }
-            /**
-             * 当校验不通过时
-             * 将表格滚动到可视区
-             * 由于提示信息至少需要占一行，定位向上偏移一行
-             */
-            if (this.validOpts.autoPos === false) {
-              finish()
-            } else {
-              const row = firstErrParams.row
-              const column = firstErrParams.column
-              this.scrollToRow(row, column).then(posAndFinish)
-            }
-          })
-        })
-      } else {
-        this.validErrorMaps = {}
+      const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : [])).map(column => handleFieldOrColumn(this, column))
+      if (colList.length) {
+        return beginValidate($xeTable, rows, colList, null)
       }
-      return this.$nextTick().then(() => {
-        if (cb) {
-          cb()
-        }
-      })
+      return $xeTable.$nextTick()
     },
     hasCellRules (type: any, row: any, column: any) {
       const { editRules } = this
@@ -400,14 +415,18 @@ export default {
      *  trigger=blur|change 触发方式（除非特殊场景，否则默认为空就行）
      */
     validCellRules (validType: any, row: any, column: any, val: any) {
-      const { editRules } = this
-      const { property } = column
-      const errorRules: any[] = []
-      const syncValidList: any[] = []
-      if (property && editRules) {
-        const rules = XEUtils.get(editRules, property)
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const internalData = $xeTable as unknown as TableInternalData
+
+      const { editRules } = props
+      const { field } = column
+      const errorRules: Rule[] = []
+      const syncValidList: Promise<any>[] = []
+      if (field && editRules) {
+        const rules = XEUtils.get(editRules, field)
         if (rules) {
-          const cellValue = XEUtils.isUndefined(val) ? XEUtils.get(row, property) : val
+          const cellValue = XEUtils.isUndefined(val) ? XEUtils.get(row, field) : val
           rules.forEach((rule: any) => {
             const { trigger, validator } = rule
             if (validType === 'all' || !trigger || validType === trigger) {
@@ -417,11 +436,11 @@ export default {
                   rule,
                   rules,
                   row,
-                  rowIndex: this.getRowIndex(row),
+                  rowIndex: $xeTable.getRowIndex(row),
                   column,
-                  columnIndex: this.getColumnIndex(column),
-                  field: column.property,
-                  $table: this
+                  columnIndex: $xeTable.getColumnIndex(column),
+                  field: column.field,
+                  $table: $xeTable
                 }
                 let customValid
                 if (XEUtils.isString(validator)) {
@@ -441,13 +460,13 @@ export default {
                 }
                 if (customValid) {
                   if (XEUtils.isError(customValid)) {
-                    this.validRuleErr = true
+                    internalData.validRuleErr = true
                     errorRules.push(new Rule({ type: 'custom', trigger, content: customValid.message, rule: new Rule(rule) }))
                   } else if (customValid.catch) {
                     // 如果为异步校验（注：异步校验是并发无序的）
                     syncValidList.push(
                       customValid.catch((e: any) => {
-                        this.validRuleErr = true
+                        internalData.validRuleErr = true
                         errorRules.push(new Rule({ type: 'custom', trigger, content: e && e.message ? e.message : (rule.content || rule.message), rule: new Rule(rule) }))
                       })
                     )
@@ -455,7 +474,7 @@ export default {
                 }
               } else {
                 if (!checkRuleStatus(rule, cellValue)) {
-                  this.validRuleErr = true
+                  internalData.validRuleErr = true
                   errorRules.push(new Rule(rule))
                 }
               }
@@ -470,32 +489,41 @@ export default {
         }
       })
     },
-    _clearValidate  (rows: any, fieldOrColumn: any) {
-      const { validOpts, validErrorMaps } = this
-      const validTip = this.$refs.refValidTooltip
+    _clearValidate (rows: any, fieldOrColumn: any) {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { validErrorMaps } = reactData
+      const validTip = $xeTable.$refs.refValidTooltip as VxeTooltipInstance
+      const validOpts = $xeTable.computeValidOpts
       const rowList = XEUtils.isArray(rows) ? rows : (rows ? [rows] : [])
-      const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : [])).map(column => handleFieldOrColumn(this, column))
-      let validErrMaps: any = {}
-      if (validTip && validTip.visible) {
+      const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : [])).map(column => handleFieldOrColumn($xeTable, column)) as VxeTableDefines.ColumnInfo<any>[]
+      let validErrMaps: Record<string, {
+          row: any;
+          column: any;
+          rule: any;
+          content: any;
+        }> = {}
+      if (validTip && validTip.reactData.visible) {
         validTip.close()
       }
       // 如果是单个提示模式
       if (validOpts.msgMode === 'single') {
-        this.validErrorMaps = {}
-        return this.$nextTick()
+        reactData.validErrorMaps = {}
+        return $xeTable.$nextTick()
       }
       if (rowList.length && colList.length) {
         validErrMaps = Object.assign({}, validErrorMaps)
         rowList.forEach(row => {
           colList.forEach((column) => {
-            const validKey = `${getRowid(this, row)}:${column.id}`
+            const validKey = `${getRowid($xeTable, row)}:${column.id}`
             if (validErrMaps[validKey]) {
               delete validErrMaps[validKey]
             }
           })
         })
       } else if (rowList.length) {
-        const rowIdList = rowList.map(row => `${getRowid(this, row)}`)
+        const rowIdList = rowList.map(row => `${getRowid($xeTable, row)}`)
         XEUtils.each(validErrorMaps, (item, key) => {
           if (rowIdList.indexOf(key.split(':')[0]) > -1) {
             validErrMaps[key] = item
@@ -509,33 +537,40 @@ export default {
           }
         })
       }
-      this.validErrorMaps = validErrMaps
-      return this.$nextTick()
+      reactData.validErrorMaps = validErrMaps
+      return $xeTable.$nextTick()
     },
     /**
      * 触发校验
      */
     triggerValidate (type: any) {
-      const { editConfig, editStore, editRules, editOpts, validOpts } = this
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { editConfig, editRules } = props
+      const { editStore } = reactData
       const { actived } = editStore
+      const editOpts = $xeTable.computeEditOpts
+      const validOpts = $xeTable.computeValidOpts
       // 检查清除校验消息
       if (editRules && validOpts.msgMode === 'single') {
-        this.validErrorMaps = {}
+        reactData.validErrorMaps = {}
       }
 
       // 校验单元格
       if (editConfig && editRules && actived.row) {
         const { row, column, cell } = actived.args
-        if (this.hasCellRules(type, row, column)) {
-          return this.validCellRules(type, row, column).then(() => {
+        if ($xeTable.hasCellRules(type, row, column)) {
+          return $xeTable.validCellRules(type, row, column).then(() => {
             if (editOpts.mode === 'row') {
-              this.clearValidate(row, column)
+              $xeTable.clearValidate(row, column)
             }
           }).catch(({ rule }: any) => {
             // 如果校验不通过与触发方式一致，则聚焦提示错误，否则跳过并不作任何处理
             if (!rule.trigger || type === rule.trigger) {
               const rest = { rule, row, column, cell }
-              this.showValidTooltip(rest)
+              $xeTable.showValidTooltip(rest)
               return Promise.reject(rest)
             }
             return Promise.resolve()
@@ -549,15 +584,19 @@ export default {
      */
     showValidTooltip (params: any) {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const props = $xeTable
+      const reactData = $xeTable as unknown as TableReactData
 
-      const { $refs, height, validStore, validErrorMaps, tableData, validOpts } = this
+      const { height } = props
+      const { tableData, validStore, validErrorMaps } = reactData
       const { rule, row, column, cell } = params
-      const validTip = $refs.refValidTooltip
+      const validOpts = $xeTable.computeValidOpts
+      const validTip = $xeTable.$refs.refValidTooltip as VxeTooltipInstance
       const content = rule.content
       validStore.visible = true
       if (validOpts.msgMode === 'single') {
-        this.validErrorMaps = {
-          [`${getRowid(this, row)}:${column.id}`]: {
+        reactData.validErrorMaps = {
+          [`${getRowid($xeTable, row)}:${column.id}`]: {
             column,
             row,
             rule,
@@ -565,8 +604,8 @@ export default {
           }
         }
       } else {
-        this.validErrorMaps = Object.assign({}, validErrorMaps, {
-          [`${getRowid(this, row)}:${column.id}`]: {
+        reactData.validErrorMaps = Object.assign({}, validErrorMaps, {
+          [`${getRowid($xeTable, row)}:${column.id}`]: {
             column,
             row,
             rule,
@@ -580,7 +619,7 @@ export default {
           return validTip.open(cell, content)
         }
       }
-      return this.$nextTick()
+      return $xeTable.$nextTick()
     }
   } as any
 }

package/packages/table/src/body.ts

@@ -155,7 +155,7 @@ function renderTdColumn (
   const cellAlign = align || (compConf ? compConf.tableCellAlign : '') || allAlign
   const cellVerticalAlign = XEUtils.eqNull(verticalAlign) ? allVerticalAlign : verticalAlign
   const errorValidItem = validErrorMaps[`${rowid}:${colid}`]
-  const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
+  const showValidTip = editRules && validOpts.showErrorMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
   const tdAttrs: any = { colid }
   const cellParams: VxeTableDefines.CellRenderBodyParams & {
     $table: VxeTableConstructor<any> & VxeTablePrivateMethods
@@ -460,6 +460,7 @@ function renderTdColumn (
         'col--dirty': isDirty,
         'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
         'col--valid-error': !!errorValidItem,
+        'show--valid-bg': errorValidItem && validOpts.showErrorBackground,
         'col--current': currentColumn === column
       },
       getClass(compCellClassName, cellParams),