diff --git a/examples/views/table/edit/CellValid.vue b/examples/views/table/edit/CellValid.vue index 3ce87a0c8..4e16ab101 100644 --- a/examples/views/table/edit/CellValid.vue +++ b/examples/views/table/edit/CellValid.vue @@ -38,7 +38,11 @@ - + + + diff --git a/packages/table/src/body.ts b/packages/table/src/body.ts index 7b30ffe48..81a033317 100644 --- a/packages/table/src/body.ts +++ b/packages/table/src/body.ts @@ -25,7 +25,7 @@ export default defineComponent({ fixedColumn: Array as PropType, fixedType: { type: String as PropType, default: null } }, - setup (props) { + setup(props) { const $xetable = inject('$xetable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods) const xesize = inject('xesize', null as ComputedRef | 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 }) } }) diff --git a/types/column.d.ts b/types/column.d.ts index 7372b600f..1b9645436 100644 --- a/types/column.d.ts +++ b/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 extends VxeTableDefines.CellRenderHeaderParams {} + export interface HeaderSlotParams extends VxeTableDefines.CellRenderHeaderParams { } export interface ContentSlotParams { column: VxeTableDefines.ColumnInfo @@ -473,4 +473,8 @@ export interface VxeColumnSlots { * @deprecated */ icon: (params: VxeColumnSlotTypes.IconSlotParams) => any + /** + * 只对 edit-render 启用时有效,自定义展示错误校验模板 + */ + valid: (params: { row: any; column: any; rule: any; content: any; }) => any }