支持行标记为删除

packages/table/src/body.js

@@ -82,10 +82,10 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
     editRules,
     validOpts,
     editStore,
-    validStore,
     tooltipConfig,
     rowOpts,
-    columnOpts
+    columnOpts,
+    validErrorMaps
   } = $xetable
   const { type, cellRender, editRender, align, showOverflow, className, treeNode } = column
   const { actived } = editStore
@@ -108,7 +108,7 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
   let isDirty
   const tdOns = {}
   const cellAlign = align || allAlign
-  const hasValidError = validStore.row === row && validStore.column === column
+  const errorValidItem = validErrorMaps[`${rowid}:${column.id}`]
   const showValidTip = editRules && validOpts.showMessage && (validOpts.message === 'default' ? (height || tableData.length > 1) : validOpts.message === 'inline')
   const attrs = { colid: column.id }
   const bindMouseenter = tableListeners['cell-mouseenter']
@@ -244,17 +244,17 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
         }
       }, column.renderCell(h, params))
     )
-    if (showValidTip && hasValidError) {
+    if (showValidTip && errorValidItem) {
       tdVNs.push(
         h('div', {
-          class: 'vxe-cell--valid',
-          style: validStore.rule && validStore.rule.maxWidth ? {
-            width: `${validStore.rule.maxWidth}px`
+          class: 'vxe-cell--valid-error-hint',
+          style: errorValidItem.rule && errorValidItem.rule.maxWidth ? {
+            width: `${errorValidItem.rule.maxWidth}px`
           } : null
         }, [
           h('span', {
-            class: 'vxe-cell--valid-msg'
-          }, validStore.content)
+            class: 'vxe-cell--valid-error-msg'
+          }, errorValidItem.content)
         ])
       )
     }
@@ -272,8 +272,8 @@ function renderColumn (h, _vm, $xetable, seq, rowid, fixedType, rowLevel, row, r
         'col--ellipsis': hasEllipsis,
         'fixed--hidden': fixedHiddenColumn,
         'col--dirty': isDirty,
-        'col--actived': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
-        'col--valid-error': hasValidError,
+        'col--active': editConfig && isEdit && (actived.row === row && (actived.column === column || editOpts.mode === 'row')),
+        'col--valid-error': !!errorValidItem,
         'col--current': currentColumn === column
       },
       UtilTools.getClass(compCellClassName, params),
@@ -310,7 +310,9 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
     expandColumn,
     hasFixedColumn,
     fullAllDataRowIdData,
-    rowOpts
+    rowOpts,
+    pendingRowList,
+    pendingRowMaps
   } = $xetable
   const childrenField = treeOpts.children || treeOpts.childrenField
   const rows = []
@@ -366,7 +368,8 @@ function renderRows (h, _vm, $xetable, fixedType, tableData, tableColumn) {
             'is--expand-tree': isExpandTree,
             'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
             'row--radio': radioOpts.highlight && $xetable.selectRadioRow === row,
-            'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row)
+            'row--checked': checkboxOpts.highlight && $xetable.isCheckedByCheckboxRow(row),
+            'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
           },
           rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
         ],

packages/table/src/methods.js

@@ -2389,7 +2389,7 @@ const Methods = {
    * 全局按下事件处理
    */
   handleGlobalMousedownEvent (evnt) {
-    const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editOpts, filterStore, getRowNode } = this
+    const { $el, $refs, $xegrid, $toolbar, mouseConfig, editStore, ctxMenuStore, editRules, editOpts, validOpts, filterStore, getRowNode } = this
     const { actived } = editStore
     const { ctxWrapper, filterWrapper, validTip } = $refs
     if (filterWrapper) {
@@ -2466,8 +2466,13 @@ const Methods = {
     if (ctxMenuStore.visible && ctxWrapper && !getEventTargetNode(evnt, ctxWrapper.$el).flag) {
       this.closeMenu()
     }
+    const isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag
+    // 如果存在校验，点击了表格之外则清除
+    if (!isActivated && editRules && validOpts.autoClear) {
+      this.validErrorMaps = {}
+    }
     // 最后激活的表格
-    this.isActivated = getEventTargetNode(evnt, ($xegrid || this).$el).flag
+    this.isActivated = isActivated
   },
   /**
    * 窗口失焦事件处理
@@ -3944,6 +3949,74 @@ const Methods = {
       this.emitEvent('sort-change', params, evnt)
     }
   },
+  setPendingRow (rows, status) {
+    const pendingMaps = { ...this.pendingRowMaps }
+    const pendingList = [...this.pendingRowList]
+    if (rows && !XEUtils.isArray(rows)) {
+      rows = [rows]
+    }
+    if (status) {
+      rows.forEach((row) => {
+        const rowid = getRowid(this, row)
+        if (rowid && !pendingMaps[rowid]) {
+          pendingList.push(row)
+          pendingMaps[rowid] = row
+        }
+      })
+    } else {
+      rows.forEach((row) => {
+        const rowid = getRowid(this, row)
+        if (rowid && pendingMaps[rowid]) {
+          const pendingIndex = this.findRowIndexOf(pendingList, row)
+          if (pendingIndex > -1) {
+            pendingList.splice(pendingIndex, 1)
+          }
+          delete pendingMaps[rowid]
+        }
+      })
+    }
+    this.pendingRowMaps = pendingMaps
+    this.pendingRowList = pendingList
+    return this.$nextTick()
+  },
+  togglePendingRow (rows) {
+    const pendingMaps = { ...this.pendingRowMaps }
+    const pendingList = [...this.pendingRowList]
+    if (rows && !XEUtils.isArray(rows)) {
+      rows = [rows]
+    }
+    rows.forEach((row) => {
+      const rowid = getRowid(this, row)
+      if (rowid) {
+        if (pendingMaps[rowid]) {
+          const pendingIndex = this.findRowIndexOf(pendingList, row)
+          if (pendingIndex > -1) {
+            pendingList.splice(pendingIndex, 1)
+          }
+          delete pendingMaps[rowid]
+        } else {
+          pendingList.push(row)
+          pendingMaps[rowid] = row
+        }
+      }
+    })
+    this.pendingRowMaps = pendingMaps
+    this.pendingRowList = pendingList
+    return this.$nextTick()
+  },
+  getPendingRecords () {
+    return this.pendingRowList.slice(0)
+  },
+  hasPendingByRow (row) {
+    const { pendingRowMaps } = this
+    const rowid = getRowid(this, row)
+    return !!pendingRowMaps[rowid]
+  },
+  clearPendingRow () {
+    this.pendingRowMaps = {}
+    this.pendingRowList = []
+    return this.$nextTick()
+  },
   sort (sortConfs, sortOrder) {
     const { sortOpts } = this
     const { multiple, remote, orders } = sortOpts
@@ -4951,7 +5024,7 @@ const Methods = {
     return this.$nextTick()
   },
   /**
-   * 更新列状态
+   * 更新列状态 updateStatus({ row, column }, cellValue)
    * 如果组件值 v-model 发生 change 时，调用改函数用于更新某一列编辑状态
    * 如果单元格配置了校验规则，则会进行校验
    */
@@ -4959,25 +5032,28 @@ const Methods = {
     const customVal = !XEUtils.isUndefined(cellValue)
     return this.$nextTick().then(() => {
       const { $refs, editRules, validStore } = this
-      if (slotParams && $refs.tableBody && editRules) {
+      const tableBody = $refs.tableBody
+      if (slotParams && tableBody && editRules) {
         const { row, column } = slotParams
         const type = 'change'
-        if (this.hasCellRules(type, row, column)) {
-          const cell = this.getCell(row, column)
-          if (cell) {
-            return this.validCellRules(type, row, column, cellValue)
-              .then(() => {
-                if (customVal && validStore.visible) {
-                  setCellValue(row, column, cellValue)
-                }
-                this.clearValidate()
-              })
-              .catch(({ rule }) => {
-                if (customVal) {
-                  setCellValue(row, column, cellValue)
-                }
-                this.showValidTooltip({ rule, row, column, cell })
-              })
+        if (this.hasCellRules) {
+          if (this.hasCellRules(type, row, column)) {
+            const cell = this.getCell(row, column)
+            if (cell) {
+              return this.validCellRules(type, row, column, cellValue)
+                .then(() => {
+                  if (customVal && validStore.visible) {
+                    setCellValue(row, column, cellValue)
+                  }
+                  this.clearValidate(row, column)
+                })
+                .catch(({ rule }) => {
+                  if (customVal) {
+                    setCellValue(row, column, cellValue)
+                  }
+                  this.showValidTooltip({ rule, row, column, cell })
+                })
+            }
           }
         }
       }

packages/table/src/table.js

@@ -343,6 +343,10 @@ export default {
       upDataFlag: 0,
       // 刷新列标识，当列的特定属性被改变时，触发表格刷新列
       reColumnFlag: 0,
+      // 已标记的对象集
+      pendingRowMaps: {},
+      // 已标记的行
+      pendingRowList: [],
       // 当前选中的筛选列
       filterStore: {
         isAllSelected: false,
@@ -413,13 +417,9 @@ export default {
       },
       // 存放数据校验相关信息
       validStore: {
-        visible: false,
-        row: null,
-        column: null,
-        content: '',
-        rule: null,
-        isArrow: false
+        visible: false
       },
+      validErrorMaps: {},
       // 导入相关信息
       importStore: {
         inited: false,
@@ -1044,6 +1044,7 @@ export default {
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
         [`vaild-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
+        'old-cell-valid': editRules && GlobalConfig.cellVaildMode === 'obsolete',
         'cell--highlight': highlightCell,
         'cell--selected': mouseConfig && mouseOpts.selected,
         'cell--area': mouseConfig && mouseOpts.area,
@@ -1227,7 +1228,9 @@ export default {
        */
       hasTip && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip') ? h('vxe-tooltip', {
         ref: 'validTip',
-        class: 'vxe-table--valid-error',
+        class: [{
+          'old-cell-valid': editRules && GlobalConfig.cellVaildMode === 'obsolete'
+        }, 'vxe-table--valid-error'],
         props: validOpts.message === 'tooltip' || tableData.length === 1 ? validTipOpts : null
       }) : _e()
     ])