diff --git a/packages/table/src/cell.js b/packages/table/src/cell.js index dccb993fb..07aaf4072 100644 --- a/packages/table/src/cell.js +++ b/packages/table/src/cell.js @@ -11,10 +11,28 @@ function renderTitlePrefixIcon (h, params) { const titlePrefix = column.titlePrefix || column.titleHelp return titlePrefix ? [ h('i', { - class: ['vxe-cell-help-icon', titlePrefix.icon || GlobalConfig.icon.TABLE_HELP], + class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || GlobalConfig.icon.TABLE_TITLE_PREFIX], on: { mouseenter (evnt) { - $table.triggerHeaderHelpEvent(evnt, params) + $table.triggerHeaderTitleEvent(evnt, titlePrefix, params) + }, + mouseleave (evnt) { + $table.handleTargetLeaveEvent(evnt) + } + } + }) + ] : [] +} + +function renderTitleSuffixIcon (h, params) { + const { $table, column } = params + const titleSuffix = column.titleSuffix + return titleSuffix ? [ + h('i', { + class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || GlobalConfig.icon.TABLE_TITLE_SUFFIX], + on: { + mouseenter (evnt) { + $table.triggerHeaderTitleEvent(evnt, titleSuffix, params) }, mouseleave (evnt) { $table.handleTargetLeaveEvent(evnt) @@ -159,7 +177,7 @@ export const Cell = { return renderTitleContent(h, params, UtilTools.formatText(column.getTitle(), 1)) }, renderDefaultHeader (h, params) { - return renderTitlePrefixIcon(h, params).concat(Cell.renderHeaderTitle(h, params)) + return renderTitlePrefixIcon(h, params).concat(Cell.renderHeaderTitle(h, params)).concat(renderTitleSuffixIcon(h, params)) }, renderDefaultCell (h, params) { const { $table, row, column } = params diff --git a/packages/table/src/methods.js b/packages/table/src/methods.js index c7dfb7a51..2a4424b61 100644 --- a/packages/table/src/methods.js +++ b/packages/table/src/methods.js @@ -2810,15 +2810,13 @@ const Methods = { this.closeTooltip() } }, - triggerHeaderHelpEvent (evnt, params) { - const { column } = params - const titlePrefix = column.titlePrefix || column.titleHelp - if (titlePrefix.content || titlePrefix.message) { + triggerHeaderTitleEvent (evnt, iconParams, params) { + if (iconParams.content || iconParams.message) { const { $refs, tooltipStore } = this - const content = getFuncText(titlePrefix.content || titlePrefix.message) + const content = getFuncText(iconParams.content || iconParams.message) this.handleTargetEnterEvent(true) tooltipStore.visible = true - tooltipStore.currOpts = { ...titlePrefix, content: null } + tooltipStore.currOpts = { ...params, content: null } this.$nextTick(() => { const $tooltip = $refs.tooltip if ($tooltip) { diff --git a/packages/table/src/util.js b/packages/table/src/util.js index c2ad5a3dc..eb9ee776b 100644 --- a/packages/table/src/util.js +++ b/packages/table/src/util.js @@ -129,10 +129,11 @@ export function getColReMinWidth (params) { const checkboxIconWidth = getPaddingLeftRightSize(queryCellElement(cell, '--title>.vxe-cell--checkbox')) const requiredIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--required-icon')) const editIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--edit-icon')) - const helpIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-help-icon')) + const prefixIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-title-prefix-icon')) + const suffixIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell-title-suffix-icon')) const sortIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--sort')) const filterIconWidth = getElemenMarginWidth(queryCellElement(cell, '>.vxe-cell--filter')) - mWidth += checkboxIconWidth + requiredIconWidth + editIconWidth + helpIconWidth + filterIconWidth + sortIconWidth + mWidth += checkboxIconWidth + requiredIconWidth + editIconWidth + prefixIconWidth + suffixIconWidth + filterIconWidth + sortIconWidth } // 如果设置最小宽 if (colMinWidth) { diff --git a/packages/v-x-e-table/src/conf.js b/packages/v-x-e-table/src/conf.js index b8e9ff22b..37f1eaef3 100644 --- a/packages/v-x-e-table/src/conf.js +++ b/packages/v-x-e-table/src/conf.js @@ -144,7 +144,8 @@ export default { TABLE_FILTER_NONE: iconPrefix + 'funnel', TABLE_FILTER_MATCH: iconPrefix + 'funnel', TABLE_EDIT: iconPrefix + 'edit', - TABLE_HELP: iconPrefix + 'question-circle-fill', + TABLE_TITLE_PREFIX: iconPrefix + 'question-circle-fill', + TABLE_TITLE_SUFFIX: iconPrefix + 'question-circle-fill', TABLE_TREE_LOADED: iconPrefix + 'spinner roll', TABLE_TREE_OPEN: iconPrefix + 'caret-right rotate90', TABLE_TREE_CLOSE: iconPrefix + 'caret-right', diff --git a/styles/table.scss b/styles/table.scss index 7db4f524b..0c59d6a46 100644 --- a/styles/table.scss +++ b/styles/table.scss @@ -398,7 +398,8 @@ } // .vxe-cell--required-icon, // .vxe-cell--edit-icon, - // .vxe-cell-help-icon, + // .vxe-cell-title-prefix-icon, + // .vxe-cell-title-suffix-icon, // .vxe-cell--title { // vertical-align: middle; // } @@ -406,10 +407,12 @@ margin-right: 0.1em; } .vxe-cell--edit-icon, - .vxe-cell-help-icon { + .vxe-cell-title-prefix-icon, + .vxe-cell-title-suffix-icon { margin-right: 0.2em; } - .vxe-cell-help-icon { + .vxe-cell-title-prefix-icon, + .vxe-cell-title-suffix-icon { cursor: help; } .vxe-resizable {