表格封装调整 操作 查询 排序 只影响表头排布而不影响表格内容

src/components/ZmTable/ZmTableColumn.vue

@@ -51,6 +51,7 @@ const tableContext = inject(TableContextKey, {
 const innerSortOrder = ref<SortOrder | null>(props.defaultSortOrder ?? null)
 const filterVisible = ref(false)
 const settingVisible = ref(false)
+const hasHeaderAction = computed(() => props.action || props.zmSortable || props.zmFilterable)
 
 const defaultOptions = ref<Partial<Props>>({
   align: 'center',
@@ -74,10 +75,7 @@ const bindProps = computed(() => {
     ...columnProps
   } = props
   const columnAlign = props.align || (attrs.align as ColumnAlign | undefined)
-  const resolvedAlign =
-    action || zmSortable || zmFilterable
-      ? 'left'
-      : columnAlign || tableContext.columnAlign.value || defaultOptions.value.align
+  const resolvedAlign = columnAlign || tableContext.columnAlign.value || defaultOptions.value.align
 
   return {
     ...defaultOptions.value,
@@ -95,7 +93,10 @@ const alignMap: Record<string, string> = {
   left: 'justify-between',
   right: 'justify-end'
 }
-const headerFlexClass = computed(() => alignMap[String(bindProps.value.align)] || 'justify-center')
+const headerFlexClass = computed(() => {
+  if (hasHeaderAction.value) return 'justify-between'
+  return alignMap[String(bindProps.value.align)] || 'justify-center'
+})
 
 const isSortControlled = computed(() => props.sortOrder !== undefined)
 const currentOrder = computed<SortOrder | null>(() => {
@@ -212,7 +213,7 @@ const calculativeWidth = () => {
     .map((item) => props.realValue?.(item) ?? item[props.prop as keyof typeof item])
     .filter(hasFilterValue)
   let labelWidth = getTextWidth(bindProps.value.label || '') + 32
-  if (props.zmFilterable || props.zmSortable) labelWidth += 8
+  if (hasHeaderAction.value) labelWidth += 8
   if (props.zmFilterable) labelWidth += 22
   if (props.zmSortable) labelWidth += 22
   const maxWidth = Math.min(
@@ -242,7 +243,7 @@ watch(
       <slot name="header" v-bind="scope">
         <div class="header-wrapper" :class="headerFlexClass">
           <span class="truncate" :title="scope.column.label">{{ scope.column.label }}</span>
-          <div v-if="props.action || props.zmSortable || props.zmFilterable" class="action-area">
+          <div v-if="hasHeaderAction" class="action-area">
             <el-tooltip
               v-if="props.zmSortable"
               :content="