diff --git a/src/components/common/DataTable.vue b/src/components/common/DataTable.vue index 6965929..6a6016f 100644 --- a/src/components/common/DataTable.vue +++ b/src/components/common/DataTable.vue @@ -7,6 +7,9 @@ export interface DataTableColumn { columnKey?: string slotName?: string headerSlotName?: string + singleLine?: boolean + showOverflowTooltip?: boolean + className?: string [attribute: string]: unknown } @@ -88,10 +91,34 @@ watch([page, pageCount], ([value, count]) => { if (value !== nextValue) page.value = nextValue }, { immediate: true }) -function columnAttrs({ key, slotName, headerSlotName, ...attrs }: DataTableColumn) { +function columnAttrs({ key, slotName, headerSlotName, singleLine, ...attrs }: DataTableColumn) { return attrs } +function systemColumn(column: DataTableColumn) { + return column.type === 'selection' + || column.type === 'index' + || column.type === 'expand' + || column.slotName === 'actions' + || column.label === '操作' +} + +function singleLineColumn(column: DataTableColumn) { + return column.singleLine !== false && !systemColumn(column) +} + +function columnOverflowTooltip(column: DataTableColumn) { + return singleLineColumn(column) ? column.showOverflowTooltip ?? true : column.showOverflowTooltip +} + +function columnClassName(column: DataTableColumn) { + return [ + column.className, + systemColumn(column) ? 'data-table__system-cell' : '', + singleLineColumn(column) ? 'data-table__single-line-cell' : '', + ].filter(Boolean).join(' ') +} + function columnRenderKey(column: DataTableColumn, index: number) { return String(column.key ?? column.columnKey ?? column.prop ?? column.property ?? index) } @@ -119,6 +146,8 @@ function setPage(value: number) { v-for="(column, index) in columns" :key="columnRenderKey(column, index)" v-bind="columnAttrs(column)" + :class-name="columnClassName(column)" + :show-overflow-tooltip="columnOverflowTooltip(column)" >