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

@@ -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,6 +273,12 @@ export default defineComponent({
           }, column.renderCell(params))
         )
         if (showValidTip && errorValidItem) {
+          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',
@@ -287,6 +293,7 @@ export default defineComponent({
             )
           }
         }
+      }
 
       return h('td', {
         class: [

types/column.d.ts

@@ -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
 }