fix: optimize table overflow and action widths

src/shared/components/DataTable.test.ts

@@ -12,8 +12,8 @@ const TableStub = defineComponent({
 })
 const ColumnStub = defineComponent({
   inheritAttrs: false,
-  props: { label: String, prop: String, fixed: [String, Boolean], showOverflowTooltip: Boolean },
-  template: '<div class="column-stub" :data-label="label" :data-prop="prop" :data-fixed="String(fixed || \'\')" :data-overflow-tooltip="String(showOverflowTooltip)"><slot /></div>',
+  props: { label: String, prop: String, fixed: [String, Boolean], showOverflowTooltip: Boolean, className: String },
+  template: '<div class="column-stub" :data-label="label" :data-prop="prop" :data-fixed="String(fixed || \'\')" :data-overflow-tooltip="String(showOverflowTooltip)" :data-class-name="className"><slot /></div>',
 })
 const ButtonStub = defineComponent({ template: '<button type="button"><slot /></button>' })
 const PopoverStub = defineComponent({ template: '<div><slot name="reference" /><slot /></div>' })
@@ -152,6 +152,36 @@ describe('DataTable column preferences', () => {
     expect(wrapper.get('.data-table__pagination').text()).toContain('共 0 条')
   })
 
+  it('keeps ordinary cells on one line with overflow tooltips and exempts system columns', () => {
+    const wrapper = shallowMount(DataTable, {
+      props: {
+        data: [],
+        columnSettingsMode: 'hide',
+        columns: [
+          { key: 'actions', label: '操作', fixed: 'left', slotName: 'actions' },
+          { key: 'customerName', label: '客户' },
+          { key: 'remark', label: '备注', singleLine: false },
+        ],
+      },
+      global: {
+        stubs: { ElTable: TableStub, ElTableColumn: ColumnStub, ElButton: ButtonStub, ElPopover: PopoverStub, ElSelect: true, ElOption: true },
+        directives: { loading: {} },
+      },
+    })
+
+    const columns = wrapper.findAll('.column-stub')
+    expect(columns[0].attributes()).toMatchObject({
+      'data-overflow-tooltip': 'undefined',
+      'data-class-name': 'data-table__system-cell',
+    })
+    expect(columns[1].attributes()).toMatchObject({
+      'data-overflow-tooltip': 'true',
+      'data-class-name': 'data-table__single-line-cell',
+    })
+    expect(columns[2].attributes('data-overflow-tooltip')).toBe('undefined')
+    expect(columns[2].attributes('data-class-name')).toBe('')
+  })
+
   it('uses key as the data property for ordinary columns only', () => {
     const wrapper = shallowMount(DataTable, {
       props: {

src/shared/components/DataTable.vue

@@ -10,6 +10,9 @@ export interface DataTableColumn {
   hideable?: boolean
   movable?: boolean
   defaultVisible?: boolean
+  singleLine?: boolean
+  showOverflowTooltip?: boolean
+  className?: string
   [attribute: string]: unknown
 }
 
@@ -241,7 +244,7 @@ watch([page, pageCount], ([value, count]) => {
   if (value !== nextValue) page.value = nextValue
 }, { immediate: true })
 
-function columnAttrs({ key, slotName, headerSlotName, hideable, movable, defaultVisible, ...attrs }: DataTableColumn) {
+function columnAttrs({ key, slotName, headerSlotName, hideable, movable, defaultVisible, singleLine, ...attrs }: DataTableColumn) {
   const hasDataProperty = attrs.prop !== undefined || attrs.property !== undefined
   const isSpecialColumn = slotName || ['selection', 'expand', 'index'].includes(String(attrs.type || ''))
   if (hasDataProperty || isSpecialColumn || key === undefined || key === null || key === '') return attrs
@@ -257,6 +260,22 @@ function columnAttrs({ key, slotName, headerSlotName, hideable, movable, default
   }
 }
 
+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)
 }
@@ -309,6 +328,8 @@ function setPage(value: number) {
         v-for="(column, index) in visibleColumns"
         :key="columnRenderKey(column, index)"
         v-bind="columnAttrs(column)"
+        :class-name="columnClassName(column)"
+        :show-overflow-tooltip="columnOverflowTooltip(column)"
       >
         <template v-if="hasSlot(column.headerSlotName)" #header="scope">
           <slot :name="column.headerSlotName" v-bind="scope" />
@@ -379,6 +400,10 @@ function setPage(value: number) {
 .data-table__page-buttons { gap: 4px; }
 .data-table__page-button { width: 32px; min-width: 32px; height: 32px; padding: 0; margin-left: 0; font-size: var(--cc-list-page-button-font-size); }
 .data-table__page-ellipsis { display: inline-flex; width: 24px; height: 32px; align-items: center; justify-content: center; }
+.data-table :deep(.data-table__single-line-cell .cell) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.data-table :deep(.data-table__system-cell .cell) { white-space: nowrap; }
+.data-table :deep(.data-table__system-cell .el-button + .el-button),
+.data-table :deep(.data-table__system-cell .el-button + .el-dropdown) { margin-left: 8px; }
 
 @media (min-width: 1920px) {
   .data-table__toolbar { min-height: 64px; gap: 12px; padding: 10px 14px; }