vxe-table 3.10.15 → 3.11.0

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

@@ -5,6 +5,8 @@ import { scrollToView } from '../../../ui/src/dom'
 import { handleFieldOrColumn, getRowid } from '../../src/util'
 import { warnLog, errLog } from '../../../ui/src/log'
 
+import type { VxeTableDefines } from '../../../../types'
+
 const { getConfig, validators } = VxeUI
 
 /**
@@ -73,7 +75,7 @@ export default {
           warnLog('vxe.error.notValidators', ['fullValidate(rows, callback)', 'fullValidate(rows)'])
         }
       }
-      return this.beginValidate(rows, cb, true)
+      return this.beginValidate(rows, null, cb, true)
     },
     /**
      * 快速校验，如果存在记录不通过的记录，则返回不再继续校验（异步校验除外）
@@ -84,7 +86,27 @@ export default {
           warnLog('vxe.error.notValidators', ['validate(rows, callback)', 'validate(rows)'])
         }
       }
-      return this.beginValidate(rows, cb)
+      return this.beginValidate(rows, null, cb)
+    },
+    /**
+     * 完整校验单元格，和 validateField 的区别就是会给有效数据中的每一行进行校验
+     */
+    _fullValidateField (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, true)
+      }
+      return this.$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()
     },
     /**
      * 聚焦到校验通过的单元格并弹出校验错误提示
@@ -131,7 +153,7 @@ export default {
      * 如果只传 callback 否则默认验证整个表格数据
      * 返回 Promise 对象，或者使用回调方式
      */
-    beginValidate (rows: any, cb: any, isFull: any) {
+    beginValidate (rows: any, cols: VxeTableDefines.ColumnInfo[] | null, cb: any, isFull: any) {
       const validRest: any = {}
       const { editRules, afterFullData, visibleColumn, treeConfig, treeOpts } = this
       const childrenField = treeOpts.children || treeOpts.childrenField
@@ -154,12 +176,13 @@ export default {
       this.clearValidate()
       const validErrMaps: any = {}
       if (editRules) {
-        const columns = this.getColumns()
+        const columns = cols && cols.length ? cols : this.getColumns()
         const handleVaild = (row: any) => {
           if (isFull || !this.validRuleErr) {
             const colVailds: any[] = []
             columns.forEach((column: any) => {
-              if ((isFull || !this.validRuleErr) && XEUtils.has(editRules, column.property)) {
+              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) => {
@@ -170,11 +193,11 @@ export default {
                         row,
                         columnIndex: this.getColumnIndex(column),
                         column,
-                        field: column.property,
+                        field,
                         $table: this
                       }
-                      if (!validRest[column.property]) {
-                        validRest[column.property] = []
+                      if (!validRest[field]) {
+                        validRest[field] = []
                       }
                       validErrMaps[`${getRowid(this, row)}:${column.id}`] = {
                         column,
@@ -182,7 +205,7 @@ export default {
                         rule,
                         content: rule.content
                       }
-                      validRest[column.property].push(rest)
+                      validRest[field].push(rest)
                       if (!isFull) {
                         this.validRuleErr = true
                         return Promise.reject(rest)
@@ -371,7 +394,7 @@ export default {
       const { validOpts, validErrorMaps } = this
       const validTip = this.$refs.validTip
       const rowList = XEUtils.isArray(rows) ? rows : (rows ? [rows] : [])
-      const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : []).map(column => handleFieldOrColumn(this, column)))
+      const colList = (XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : (fieldOrColumn ? [fieldOrColumn] : [])).map(column => handleFieldOrColumn(this, column))
       let validErrMaps: any = {}
       if (validTip && validTip.visible) {
         validTip.close()

package/packages/table/src/body.ts

@@ -337,7 +337,9 @@ function renderRows (h: CreateElement, _vm: any, $xeTable: any, fixedType: any,
     fullAllDataRowIdData,
     rowOpts,
     pendingRowList,
-    pendingRowMaps
+    pendingRowMaps,
+    columnOpts,
+    isDragColMove
   } = $xeTable
   const childrenField = treeOpts.children || treeOpts.childrenField
   const rows: any[] = []
@@ -393,32 +395,48 @@ function renderRows (h: CreateElement, _vm: any, $xeTable: any, fixedType: any,
       rowChildren = row[childrenField]
       isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid]
     }
+    const trClass = [
+      'vxe-body--row',
+      treeConfig ? `row--level-${rowLevel}` : '',
+      {
+        'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
+        'is--new': isNewRow,
+        'is--expand-row': isExpandRow,
+        '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--pending': pendingRowList.length && !!pendingRowMaps[rowid]
+      },
+      rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
+    ]
+    const tdVNs = tableColumn.map((column: any, $columnIndex: any) => {
+      return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
+    })
     rows.push(
-      h('tr', {
-        class: [
-          'vxe-body--row',
-          treeConfig ? `row--level-${rowLevel}` : '',
-          {
-            'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
-            'is--new': isNewRow,
-            'is--expand-row': isExpandRow,
-            '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--pending': pendingRowList.length && !!pendingRowMaps[rowid]
+      columnOpts.drag
+        ? h('transition-group', {
+          props: {
+            tag: 'tr',
+            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`
           },
-          rowClassName ? (XEUtils.isFunction(rowClassName) ? rowClassName(params) : rowClassName) : ''
-        ],
-        attrs: {
-          rowid
-        },
-        style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-        key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
-        on: trOn
-      }, tableColumn.map((column: any, $columnIndex: any) => {
-        return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
-      }))
+          class: trClass,
+          attrs: {
+            rowid
+          },
+          style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
+          key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+          nativeOn: trOn
+        }, tdVNs)
+        : h('tr', {
+          class: trClass,
+          attrs: {
+            rowid
+          },
+          style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
+          key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+          on: trOn
+        }, tdVNs)
     )
     // 如果行被展开了
     if (isExpandRow) {

package/packages/table/src/cell.ts

@@ -1,4 +1,4 @@
-import { CreateElement } from 'vue'
+import { CreateElement, VNode } from 'vue'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
@@ -6,6 +6,8 @@ import { updateCellTitle } from '../../ui/src/dom'
 import { createColumn, getRowid } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 
+import type { VxeTableDefines } from '../../../types'
+
 const { getI18n, getIcon, renderer, formats, renderEmptyElement } = VxeUI
 
 function renderTitlePrefixIcon (h: CreateElement, params: any) {
@@ -50,9 +52,12 @@ function renderTitleSuffixIcon (h: CreateElement, params: any) {
 
 function renderCellDragIcon (h: CreateElement, params: any) {
   const { $table } = params
-  const dragOpts = $table.computeDragOpts
-  const { rowIcon, rowDisabledMethod } = dragOpts
-  const isDisabled = rowDisabledMethod && rowDisabledMethod(params)
+  const tableProps = $table
+  const { dragConfig } = tableProps
+  const rowDragOpts = $table.computeRowDragOpts
+  const { icon, disabledMethod } = rowDragOpts
+  const rDisabledMethod = disabledMethod || (dragConfig ? dragConfig.rowDisabledMethod : null)
+  const isDisabled = rDisabledMethod && rDisabledMethod(params)
   return h('span', {
     key: 'dg',
     class: ['vxe-cell--drag-handle', {
@@ -68,21 +73,22 @@ function renderCellDragIcon (h: CreateElement, params: any) {
     }
   }, [
     h('i', {
-      class: rowIcon || getIcon().TABLE_DRAG_ROW
+      class: icon || (dragConfig ? dragConfig.rowIcon : '') || getIcon().TABLE_DRAG_ROW
     })
   ])
 }
 
 function renderCellBaseVNs (h: CreateElement, params: any, content: any) {
-  const { $table, column, row, level } = params
+  const { $table, column, level } = params
   const { dragSort } = column
   const tableProps = $table
-  const { treeConfig } = tableProps
+  const { treeConfig, dragConfig } = tableProps
   const rowOpts = $table.computeRowOpts
-  const dragOpts = $table.computeDragOpts
-  const { showRowIcon, rowVisibleMethod } = dragOpts
+  const rowDragOpts = $table.computeRowDragOpts
+  const { showIcon, visibleMethod } = rowDragOpts
+  const rVisibleMethod = visibleMethod || (dragConfig ? dragConfig.rowVisibleMethod : null)
   const vns: any[] = XEUtils.isArray(content) ? content : [content]
-  if (dragSort && rowOpts.drag && (showRowIcon && (!rowVisibleMethod || rowVisibleMethod({ row, column })))) {
+  if (dragSort && rowOpts.drag && ((showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params)))) {
     if (!treeConfig || !level) {
       vns.unshift(
         renderCellDragIcon(h, params)
@@ -92,6 +98,47 @@ function renderCellBaseVNs (h: CreateElement, params: any, content: any) {
   return vns
 }
 
+function renderHeaderCellDragIcon (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams) {
+  const { $table, column } = params
+  const columnOpts = $table.computeColumnOpts
+  const columnDragOpts = $table.computeColumnDragOpts
+  const { showIcon, icon, visibleMethod, disabledMethod } = columnDragOpts
+  const isDisabled = disabledMethod && disabledMethod(params)
+  if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
+    if (!(column.fixed || column.parentId)) {
+      return h('span', {
+        key: 'dg',
+        class: ['vxe-cell--drag-handle', {
+          'is--disabled': isDisabled
+        }],
+        on: {
+          mousedown (evnt: MouseEvent) {
+            if (!isDisabled) {
+              $table.handleHeaderCellDragMousedownEvent(evnt, params)
+            }
+          },
+          mouseup: $table.handleHeaderCellDragMouseupEvent
+        }
+      }, [
+        h('i', {
+          class: icon || getIcon().TABLE_DRAG_COLUMN
+        })
+      ])
+    }
+  }
+  return renderEmptyElement($table)
+}
+
+function renderHeaderCellBaseVNs (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams, content: VNode | VNode[]) {
+  const vns = [
+    renderTitlePrefixIcon(h, params),
+    renderHeaderCellDragIcon(h, params),
+    ...(XEUtils.isArray(content) ? content : [content]),
+    renderTitleSuffixIcon(h, params)
+  ]
+  return vns
+}
+
 function renderTitleContent (h: CreateElement, params: any, content: any) {
   const { $table, column } = params
   const { type, showHeaderOverflow } = column
@@ -252,7 +299,7 @@ export const Cell = {
     return createColumn($xetable, _vm, renMaps)
   },
   /**
-   * 单元格
+   * 列头标题
    */
   renderHeaderTitle (h: any, params: any) {
     const { $table, column } = params
@@ -271,7 +318,7 @@ export const Cell = {
     return renderTitleContent(h, params, formatText(column.getTitle(), 1))
   },
   renderDefaultHeader (h: CreateElement, params: any) {
-    return renderTitlePrefixIcon(h, params).concat(Cell.renderHeaderTitle(h, params)).concat(renderTitleSuffixIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params))
   },
   renderDefaultCell (h: CreateElement, params: any) {
     const { $table, row, column } = params
@@ -380,12 +427,12 @@ export const Cell = {
   },
 
   /**
-   * 索引
+   * 序号
    */
   renderSeqHeader (h: CreateElement, params: any) {
     const { $table, column } = params
     const { slots } = column
-    return renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : formatText(column.getTitle(), 1))
+    return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : formatText(column.getTitle(), 1)))
   },
   renderSeqCell (h: CreateElement, params: any) {
     const { $table, column } = params
@@ -412,13 +459,15 @@ export const Cell = {
     const { slots } = column
     const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
-    return renderTitleContent(h, params, headerSlot
-      ? $table.callSlot(headerSlot, params, h)
-      : [
-          h('span', {
-            class: 'vxe-radio--label'
-          }, titleSlot ? $table.callSlot(titleSlot, params, h) : formatText(column.getTitle(), 1))
-        ])
+    return renderHeaderCellBaseVNs(h, params,
+      renderTitleContent(h, params, headerSlot
+        ? $table.callSlot(headerSlot, params, h)
+        : [
+            h('span', {
+              class: 'vxe-radio--label'
+            }, titleSlot ? $table.callSlot(titleSlot, params, h) : formatText(column.getTitle(), 1))
+          ])
+    )
   },
   renderRadioCell (h: CreateElement, params: any) {
     const { $table, column, isHidden } = params
@@ -500,38 +549,40 @@ export const Cell = {
     }
     const checkboxParams = { ...params, checked: isAllCheckboxSelected, disabled: isAllCheckboxDisabled, indeterminate: isAllCheckboxIndeterminate }
     if (headerSlot) {
-      return renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h))
+      return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)))
     }
     if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
-      return renderTitleContent(h, checkboxParams, [
+      return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
         h('span', {
           class: 'vxe-checkbox--label'
         }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
-      ])
+      ]))
     }
-    return renderTitleContent(h, checkboxParams, [
-      h('span', {
-        class: ['vxe-cell--checkbox', {
-          'is--checked': isAllCheckboxSelected,
-          'is--disabled': isAllCheckboxDisabled,
-          'is--indeterminate': isAllCheckboxIndeterminate
-        }],
-        attrs: {
-          title: getI18n('vxe.table.allTitle')
-        },
-        on
-      }, [
+    return renderHeaderCellBaseVNs(h, params,
+      renderTitleContent(h, checkboxParams, [
         h('span', {
-          class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
-        })
-      ].concat(titleSlot || headerTitle
-        ? [
-            h('span', {
-              class: 'vxe-checkbox--label'
-            }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
-          ]
-        : []))
-    ])
+          class: ['vxe-cell--checkbox', {
+            'is--checked': isAllCheckboxSelected,
+            'is--disabled': isAllCheckboxDisabled,
+            'is--indeterminate': isAllCheckboxIndeterminate
+          }],
+          attrs: {
+            title: getI18n('vxe.table.allTitle')
+          },
+          on
+        }, [
+          h('span', {
+            class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllCheckboxSelected ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
+          })
+        ].concat(titleSlot || headerTitle
+          ? [
+              h('span', {
+                class: 'vxe-checkbox--label'
+              }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)
+            ]
+          : []))
+      ])
+    )
   },
   renderCheckboxCell (h: CreateElement, params: any) {
     const { $table, row, column, isHidden } = params
@@ -748,16 +799,14 @@ export const Cell = {
    * 排序和筛选
    */
   renderSortAndFilterHeader (h: CreateElement, params: any) {
-    return Cell.renderDefaultHeader(h, params)
-      .concat(Cell.renderSortIcon(h, params))
-      .concat(Cell.renderFilterIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderSortIcon(h, params)))
   },
 
   /**
    * 排序
    */
   renderSortHeader (h: CreateElement, params: any) {
-    return Cell.renderDefaultHeader(h, params).concat(Cell.renderSortIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderSortIcon(h, params)))
   },
   renderSortIcon (h: CreateElement, params: any) {
     const { $table, column } = params
@@ -804,7 +853,7 @@ export const Cell = {
    * 筛选
    */
   renderFilterHeader (h: CreateElement, params: any) {
-    return Cell.renderDefaultHeader(h, params).concat(Cell.renderFilterIcon(h, params))
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderFilterIcon(h, params)))
   },
   renderFilterIcon (h: CreateElement, params: any) {
     const { $table, column, hasFilter } = params
@@ -849,22 +898,26 @@ export const Cell = {
         isRequired = columnRules.some((rule: any) => rule.required)
       }
     }
-    return (isEnableConf(editConfig)
-      ? [
-          isRequired && editOpts.showAsterisk
-            ? h('i', {
-              class: 'vxe-cell--required-icon'
-            })
-            : null,
-          isEnableConf(editRender) && editOpts.showIcon
-            ? h('i', {
-              class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
-            })
-            : null
-        ]
-      : []).concat(Cell.renderDefaultHeader(h, params))
-      .concat(sortable || remoteSort ? Cell.renderSortIcon(h, params) : [])
-      .concat(filters ? Cell.renderFilterIcon(h, params) : [])
+    let editIconVNs: VNode[] = []
+    if (isEnableConf(editConfig)) {
+      editIconVNs = [
+        isRequired && editOpts.showAsterisk
+          ? h('i', {
+            class: 'vxe-cell--required-icon'
+          })
+          : renderEmptyElement($table),
+        isEnableConf(editRender) && editOpts.showIcon
+          ? h('i', {
+            class: ['vxe-cell--edit-icon', editOpts.icon || getIcon().TABLE_EDIT]
+          })
+          : renderEmptyElement($table)
+      ]
+    }
+    return renderHeaderCellBaseVNs(h, params,
+      editIconVNs.concat(Cell.renderHeaderTitle(h, params))
+        .concat(sortable || remoteSort ? Cell.renderSortIcon(h, params) : [])
+        .concat(filters ? Cell.renderFilterIcon(h, params) : [])
+    )
   },
   // 行格编辑模式
   renderRowEdit (h: CreateElement, params: any) {