feat: 新增自定义校验插槽

examples/views/table/edit/CellValid.vue

@@ -38,7 +38,11 @@
       </vxe-colgroup>
       <vxe-colgroup title="分组2">
         <vxe-colgroup title="分组21">
-          <vxe-column field="sex2" title="Sex" :edit-render="{name: 'input'}"></vxe-column>
+          <vxe-column field="sex2" title="Sex" :edit-render="{name: 'input'}">
+            <template #validError="params">
+              <span class="red">{{ params }}</span>
+            </template>
+          </vxe-column>
           <vxe-column field="age" title="Age" :edit-render="{name: '$input', props: {type: 'integer'}}"></vxe-column>
           <vxe-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-column>
         </vxe-colgroup>

packages/table/src/body.ts

@@ -25,7 +25,7 @@ export default defineComponent({
     fixedColumn: Array as PropType<VxeTableDefines.ColumnInfo[]>,
     fixedType: { type: String as PropType<VxeColumnPropTypes.Fixed>, default: null }
   },
-  setup (props) {
+  setup(props) {
     const $xetable = inject('$xetable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const xesize = inject('xesize', null as ComputedRef<SizeType> | null)
@@ -134,7 +134,7 @@ export default defineComponent({
       const rowOpts = computeRowOpts.value
       const sYOpts = computeSYOpts.value
       const columnOpts = computeColumnOpts.value
-      const { type, cellRender, editRender, align, showOverflow, className, treeNode } = column
+      const { type, cellRender, editRender, align, showOverflow, className, treeNode, slots } = column
       const { actived } = editStore
       const { rHeight: scrollYRHeight } = sYOpts
       const { height: rowHeight } = rowOpts
@@ -273,18 +273,25 @@ export default defineComponent({
           }, column.renderCell(params))
         )
         if (showValidTip && errorValidItem) {
-          tdVNs.push(
-            h('div', {
-              class: 'vxe-cell--valid-error-hint',
-              style: errorValidItem.rule && errorValidItem.rule.maxWidth ? {
-                width: `${errorValidItem.rule.maxWidth}px`
-              } : null
-            }, [
-              h('span', {
-                class: 'vxe-cell--valid-error-msg'
-              }, errorValidItem.content)
-            ])
-          )
+          if (slots.validError) {
+            const validErrorSlot = $xetable.callSlot(slots.validError, errorValidItem)
+            tdVNs.push(
+              h('div', {class: 'vxe-cell--valid-error-slot'}, validErrorSlot)
+            )
+          } else {
+            tdVNs.push(
+              h('div', {
+                class: 'vxe-cell--valid-error-hint',
+                style: errorValidItem.rule && errorValidItem.rule.maxWidth ? {
+                  width: `${errorValidItem.rule.maxWidth}px`
+                } : null
+              }, [
+                h('span', {
+                  class: 'vxe-cell--valid-error-msg'
+                }, errorValidItem.content)
+              ])
+            )
+          }
         }
       }
 
@@ -840,7 +847,7 @@ export default defineComponent({
           }, mouseOpts.extension ? [
             h('span', {
               class: 'vxe-table--cell-main-area-btn',
-              onMousedown (evnt: any) {
+              onMousedown(evnt: any) {
                 $xetable.triggerCellExtendMousedownEvent(evnt, { $table: $xetable, fixed: fixedType, type: renderType })
               }
             })

types/column.d.ts

@@ -130,7 +130,7 @@ export namespace VxeColumnPropTypes {
     message?: string
   }
 
-  export interface TitleHelp extends TitlePrefix {}
+  export interface TitleHelp extends TitlePrefix { }
 
   export type CellType = 'auto' | 'number' | 'string'
 
@@ -405,7 +405,7 @@ export namespace VxeColumnSlotTypes {
     data: D[][]
   }
 
-  export interface HeaderSlotParams<D = VxeTableDataRow> extends VxeTableDefines.CellRenderHeaderParams<D> {}
+  export interface HeaderSlotParams<D = VxeTableDataRow> extends VxeTableDefines.CellRenderHeaderParams<D> { }
 
   export interface ContentSlotParams<D = VxeTableDataRow> {
     column: VxeTableDefines.ColumnInfo<D>
@@ -473,4 +473,8 @@ export interface VxeColumnSlots<D = VxeTableDataRow> {
    * @deprecated
    */
   icon: (params: VxeColumnSlotTypes.IconSlotParams<D>) => any
+   /**
+   * 只对 edit-render 启用时有效，自定义展示错误校验模板
+   */
+  valid: (params: { row: any; column: any; rule: any; content: any; }) => any
 }