releases 4.18.0

Author: xuliangzhan

examples/views/grid/GridTest5.vue

@@ -1,12 +1,22 @@
 <template>
   <div>
-    <vxe-grid v-bind="gridOptions"></vxe-grid>
+    <div>
+      <vxe-radio-group v-model="gridOptions.validConfig.theme">
+        <vxe-radio-button checked-value="normal" content="简化"></vxe-radio-button>
+        <vxe-radio-button checked-value="beautify" content="高亮"></vxe-radio-button>
+      </vxe-radio-group>
+
+      <vxe-button @click="validEvent">校验变动数据</vxe-button>
+      <vxe-button @click="fullValidEvent">校验全量数据</vxe-button>
+    </div>
+    <vxe-grid ref="gridRef" v-bind="gridOptions"></vxe-grid>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive } from 'vue'
-import type { VxeGridProps } from '../../../types'
+import { ref, reactive } from 'vue'
+import { VxeUI } from '../../../packages'
+import { VxeGridProps, VxeTablePropTypes, VxeGridInstance } from '../../../types'
 
 interface RowVO {
   id: number
@@ -17,27 +27,71 @@ interface RowVO {
   address: string
 }
 
-const gridOptions = reactive<VxeGridProps<RowVO>>({
-  customConfig: {
-    mode: 'modal',
-    checkMethod ({ column }) {
-      return !['seq', 'name'].includes(column.field)
-    }
+const gridRef = ref<VxeGridInstance<RowVO>>()
+
+const gridOptions = reactive<VxeGridProps<RowVO> & { validConfig: VxeTablePropTypes.ValidConfig }>({
+  border: true,
+  showOverflow: true,
+  keepSource: true,
+  height: 300,
+  editConfig: {
+    trigger: 'click',
+    mode: 'row',
+    showStatus: true
   },
-  toolbarConfig: {
-    custom: true
+  validConfig: {
+    msgMode: 'full',
+    theme: 'beautify',
+    showErrorBackground: true
+  },
+  editRules: {
+    name: [
+      { required: true, message: '必须填写' }
+    ],
+    role: [
+      { required: true, message: '必须填写' }
+    ]
   },
   columns: [
-    { field: 'seq', type: 'seq', width: 70 },
-    { field: 'name', title: 'Name' },
-    { field: 'sex', title: 'Sex' },
-    { field: 'age', title: 'Age' }
+    { type: 'checkbox', width: 60 },
+    { type: 'seq', width: 70 },
+    { field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },
+    { field: 'role', title: 'Role', editRender: { name: 'VxeInput' } },
+    { field: 'sex', title: 'Sex', editRender: { name: 'VxeInput' } },
+    { field: 'age', title: 'Age', editRender: { name: 'VxeInput' } },
+    { field: 'date', title: 'Date', editRender: { name: 'VxeInput' } }
   ],
   data: [
-    { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
-    { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
-    { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
-    { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
+    { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
+    { id: 10002, name: '', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
+    { id: 10003, name: 'Test3', role: 'PM', sex: '', age: 32, address: 'Shanghai' },
+    { id: 10004, name: 'Test4', role: 'Designer', sex: '', age: 23, address: 'test abc' },
+    { id: 10005, name: '', role: '', sex: '1', age: 30, address: 'Shanghai' },
+    { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' }
   ]
 })
+
+const validEvent = async () => {
+  const $grid = gridRef.value
+  if ($grid) {
+    const errMap = await $grid.fullValidate()
+    if (errMap) {
+      VxeUI.modal.message({ status: 'error', content: '校验不通过！' })
+    } else {
+      VxeUI.modal.message({ status: 'success', content: '校验成功！' })
+    }
+  }
+}
+
+const fullValidEvent = async () => {
+  const $grid = gridRef.value
+  if ($grid) {
+    const errMap = await $grid.fullValidate(true)
+    if (errMap) {
+      VxeUI.modal.message({ status: 'error', content: '校验不通过！' })
+    } else {
+      VxeUI.modal.message({ status: 'success', content: '校验成功！' })
+    }
+  }
+}
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-table",
-  "version": "4.18.0-beta.0",
+  "version": "4.18.0-beta.1",
   "description": "A PC-end table component based on Vxe UI, supporting copy-paste, data pivot table, and high-performance virtual list table solution.",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/table/src/body.ts

@@ -172,7 +172,7 @@ export default defineVxeComponent({
       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
@@ -469,6 +469,7 @@ export default defineVxeComponent({
             '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
           },
           getPropClass(compCellClassName, cellParams),

packages/table/src/table.ts

@@ -1,7 +1,7 @@
 import { h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTick, Teleport, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, watch, computed, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom'
+import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, scrollTopTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
 import { createReactData, createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn } from './util'
@@ -147,7 +147,12 @@ export default defineVxeComponent({
     })
 
     const computeValidOpts = computed(() => {
-      return Object.assign({}, getConfig().table.validConfig, props.validConfig)
+      const opts = Object.assign({}, getConfig().table.validConfig, props.validConfig)
+      // 兼容老版本
+      if (XEUtils.isBoolean(opts.showMessage)) {
+        opts.showErrorMessage = opts.showMessage
+      }
+      return opts
     })
 
     /**
@@ -4434,28 +4439,6 @@ export default defineVxeComponent({
       })
     }
 
-    const wheelScrollTopTo = (diffNum: number, cb: (progress: number) => void) => {
-      const duration = Math.abs(diffNum)
-      const startTime = performance.now()
-      let countTop = 0
-      const step = (timestamp: number) => {
-        let progress = (timestamp - startTime) / duration
-        if (progress < 0) {
-          progress = 0
-        } else if (progress > 1) {
-          progress = 1
-        }
-        const easedProgress = Math.pow(progress, 2)
-        const offsetTop = Math.floor((diffNum * easedProgress)) - countTop
-        countTop += offsetTop
-        cb(offsetTop)
-        if (progress < 1) {
-          requestAnimationFrame(step)
-        }
-      }
-      requestAnimationFrame(step)
-    }
-
     const syncGanttScrollTop = (scrollTop: number) => {
       const $xeGanttView = internalData.xeGanttView
       if ($xeGanttView) {
@@ -11809,7 +11792,7 @@ export default defineVxeComponent({
               fixed: ''
             })
           } else {
-            wheelScrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
+            scrollTopTo(scrollTop - currScrollTop, (offsetTop: number) => {
               internalData.inWheelScroll = true
               const currTopNum = bodyScrollElem.scrollTop + offsetTop
               setScrollTop(yHandleEl, currTopNum)
@@ -13017,7 +13000,7 @@ export default defineVxeComponent({
             /**
               * 校验提示
               */
-            props.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
+            props.editRules && validOpts.showErrorMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
               ? h(VxeUITooltipComponent, {
                 key: 'vtp',
                 ref: refValidTooltip,

packages/ui/index.ts

@@ -75,7 +75,7 @@ VxeUI.setConfig({
       enterable: true
     },
     validConfig: {
-      showMessage: true,
+      showErrorMessage: true,
       autoClear: true,
       autoPos: true,
       message: 'inline',

packages/ui/src/dom.ts

@@ -212,3 +212,25 @@ export function triggerEvent (targetElem: Element, type: string) {
 export function isNodeElement (elem: any): elem is HTMLElement {
   return elem && elem.nodeType === 1
 }
+
+export function scrollTopTo (diffNum: number, cb: (progress: number) => void) {
+  const duration = Math.abs(diffNum)
+  const startTime = performance.now()
+  let countTop = 0
+  const step = (timestamp: number) => {
+    let progress = (timestamp - startTime) / duration
+    if (progress < 0) {
+      progress = 0
+    } else if (progress > 1) {
+      progress = 1
+    }
+    const easedProgress = Math.pow(progress, 2)
+    const offsetTop = Math.floor((diffNum * easedProgress)) - countTop
+    countTop += offsetTop
+    cb(offsetTop)
+    if (progress < 1) {
+      requestAnimationFrame(step)
+    }
+  }
+  requestAnimationFrame(step)
+}

packages/ui/src/utils.ts

@@ -50,3 +50,7 @@ export function formatText (value: any, placeholder?: any) {
 export function eqEmptyValue (cellValue: any) {
   return cellValue === '' || XEUtils.eqNull(cellValue)
 }
+
+export function getDefaultConfig (val1: any, def1: any) {
+  return XEUtils.eqNull(val1) ? def1 : val1
+}

styles/components/table.scss

@@ -2454,13 +2454,16 @@ $btnThemeList: (
     }
     .vxe-cell--valid-error-theme-normal {
       color: var(--vxe-ui-table-validate-error-color);
-      background-color: var(--vxe-ui-table-validate-error-background-color);
+      background-color: var(--vxe-ui-table-validate-error-theme-normal-background-color);
     }
     &.col--active,
     &.col--selected {
       position: relative;
     }
     &.col--valid-error {
+      &.show--valid-bg {
+        background-color: var(--vxe-ui-table-validate-error-cell-background-color);
+      }
       .vxe-default-input,
       .vxe-default-textarea,
       .vxe-default-select {
@@ -2651,7 +2654,7 @@ div.vxe-table--tooltip-wrapper {
   &.vxe-table--valid-error {
     padding: 0;
     color: var(--vxe-ui-table-validate-error-color);
-    background-color: var(--vxe-ui-table-validate-error-background-color);
+    background-color: var(--vxe-ui-table-validate-error-theme-normal-background-color);
     &.old-cell-valid {
       padding: 8px 12px;
       background-color: #f56c6c;

styles/theme/base.scss

@@ -80,7 +80,8 @@
   --vxe-ui-table-menu-background-color: #fff;
 
   --vxe-ui-table-validate-error-color: #f56c6c;
-  --vxe-ui-table-validate-error-background-color: var(--vxe-ui-layout-background-color);
+  --vxe-ui-table-validate-error-cell-background-color: rgba(245, 108,108, 0.1);
+  --vxe-ui-table-validate-error-theme-normal-background-color: var(--vxe-ui-layout-background-color);
 
   /*toolbar*/
   --vxe-ui-toolbar-custom-active-background-color: #D9DADB;