MatchTableHeader 表格表头

# MatchTableHeader 表格表头

表格表头组件，用于展示表格的列标题，支持排序、自定义对齐方式和列宽设置。

# 特性

📊 列配置 - 灵活的列配置，支持宽度、对齐方式等属性
🔄 排序功能 - 支持列排序，提供升序、降序、无序三种状态
🎨 自定义样式 - 丰富的CSS变量支持主题定制
🔧 插槽支持 - 支持自定义列标题内容
📱 响应式 - 自适应不同屏幕尺寸
⚡ 轻量高效 - 优化的代码结构，性能出色

# 适用场景

数据列表展示
排行榜表头
赛程表表头
成绩单表头
任何需要表格展示的场景

# 引入

import PressMatchTableHeader from 'press-next/press-match-table-header/press-match-table-header';

# 代码演示

# 基础用法

<template>
  <PressMatchTableHeader
    :columns="columns"
    @sort="handleSort"
  />
</template>

<script setup>
import { ref } from 'vue';
import PressMatchTableHeader from 'press-next/press-match-table-header/press-match-table-header';

const columns = ref([
  {
    key: 'rank',
    title: '排名',
    width: 'auto',
    align: 'left',
    sortable: false,
  },
  {
    key: 'nickname',
    title: '玩家昵称',
    width: '1.2rem',
    align: 'left',
    sortable: false,
  },
  {
    key: 'contact',
    title: '联系方式',
    width: '1.2rem',
    align: 'center',
    sortable: false,
  },
  {
    key: 'kills',
    title: '击杀数',
    width: '1.2rem',
    align: 'center',
    sortable: true,
  },
]);

const handleSort = ({ key, order }) => {
  console.log('排序:', key, order);
};
</script>

# 支持排序

<template>
  <PressMatchTableHeader
    :columns="sortableColumns"
    @sort="handleSort"
  />
</template>

<script setup>
import { ref } from 'vue';

const sortableColumns = ref([
  {
    key: 'rank',
    title: '排名',
    width: '1rem',
    align: 'center',
    sortable: true,
  },
  {
    key: 'score',
    title: '分数',
    width: '1.2rem',
    align: 'center',
    sortable: true,
  },
  {
    key: 'time',
    title: '用时',
    width: '1.2rem',
    align: 'center',
    sortable: true,
  },
]);

const handleSort = ({ key, order }) => {
  console.log(`按 ${key} ${order === 'asc' ? '升序' : order === 'desc' ? '降序' : '无序'} 排序`);
  // 这里可以调用接口重新获取数据
};
</script>

# 自定义列宽和对齐

<template>
  <PressMatchTableHeader
    :columns="customColumns"
  />
</template>

<script setup>
import { ref } from 'vue';

const customColumns = ref([
  {
    key: 'id',
    title: 'ID',
    width: '.8rem',
    align: 'left',
  },
  {
    key: 'name',
    title: '名称',
    width: '2rem',
    align: 'left',
  },
  {
    key: 'status',
    title: '状态',
    width: '1rem',
    align: 'center',
  },
  {
    key: 'action',
    title: '操作',
    width: '1.5rem',
    align: 'right',
  },
]);
</script>

# 自定义列标题

<template>
  <PressMatchTableHeader
    :columns="columns"
  >
    <template #header-rank="{ column }">
      <div class="custom-header">
        <span class="icon">🏆</span>
        <span>{{ column.title }}</span>
      </div>
    </template>
    
    <template #header-score="{ column }">
      <div class="custom-header">
        <span class="icon">⭐</span>
        <span>{{ column.title }}</span>
      </div>
    </template>
  </PressMatchTableHeader>
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
  { key: 'rank', title: '排名', width: '1rem', align: 'center' },
  { key: 'score', title: '分数', width: '1.2rem', align: 'center' },
  { key: 'player', title: '玩家', width: '1.5rem', align: 'left' },
]);
</script>

<style scoped>
.custom-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon {
  font-size: 16px;
}
</style>

# 赛程表表头

<template>
  <PressMatchTableHeader
    :columns="scheduleColumns"
  />
</template>

<script setup>
import { ref } from 'vue';

const scheduleColumns = ref([
  {
    key: 'rounds',
    title: '轮次',
    width: '1.2rem',
    align: 'left',
  },
  {
    key: 'settings',
    title: '开赛设置',
    width: '2rem',
    align: 'center',
  },
  {
    key: 'ways',
    title: '决赛方式',
    width: '1.4rem',
    align: 'center',
  },
  {
    key: 'operate',
    title: '操作',
    width: '1.6rem',
    align: 'center',
  },
]);
</script>

# API

# Props

参数	说明	类型	默认值
columns	列配置数组	Column[]	`[]`
custom-class	自定义样式类	string	`''`

# Column 数据结构

interface Column {
  key: string; // 列的唯一标识
  title: string; // 列标题
  width?: string; // 列宽度，如 '1.2rem' 或 'auto'
  minWidth?: string; // 最小宽度
  align?: 'left' | 'center' | 'right'; // 对齐方式
  sortable?: boolean; // 是否支持排序
}

# Slots

名称	说明	参数
header-{key}	自定义列标题内容，{key}为列的key值	`{ column: Column }`

# Events

事件名	说明	参数
sort	点击排序时触发	`{ key: string, order: 'asc' \\| 'desc' \\| null }`

# 注意事项

# 使用建议

列宽设置：建议使用 rem 单位设置列宽，确保在不同设备上的一致性
对齐方式：数字类数据建议使用 center 或 right 对齐，文本类数据使用 left 对齐
排序功能：排序状态为三态循环：无序 → 升序 → 降序 → 无序
最小宽度：可以通过 minWidth 设置列的最小宽度，防止内容过多时被压缩
自定义标题：使用 header-{key} 插槽可以完全自定义列标题的展示内容

# 性能优化

列配置建议使用 ref 包裹，避免不必要的重新渲染
大量列时建议设置固定宽度，避免浏览器频繁计算
排序操作建议做防抖处理

# 兼容性

支持 Vue 3.0+
兼容现代浏览器（Chrome 60+, Firefox 60+, Safari 12+）
支持微信小程序、支付宝小程序等平台

# 主题定制

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

# 样式变量

# 间距系统 (Spacing)

名称	默认值	描述
--pmth-header-cell-padding	0	单元格内边距
--pmth-header-cell-padding-left	$spacing-md	头部左内边距
--pmth-sort-icon-margin-left	.08rem	排序图标左边距
--pmth-sort-arrow-margin-bottom	.02rem	排序箭头底部边距

# 块状系统 (Box Model)

名称	默认值	描述
--pmth-table-header-width	100%	表头宽度
--pmth-table-header-container-width	100%	表头容器宽度
--pmth-header-overflow-x	auto	头部横向溢出
--pmth-header-height	.7rem	头部高度
--pmth-header-cell-min-width	1.4rem	单元格最小宽度
--pmth-sort-icon-size	.24rem	排序图标尺寸
--pmth-sort-arrow-size	.08rem	排序箭头尺寸

# 颜色系统 (Colors)

名称	默认值	描述
--pmth-table-header-container-bg-color	transparent	表头容器背景色
--pmth-table-header-container-bg-image	url(...)	表头容器背景图
--pmth-table-header-container-bg-size	100% 100%, 100% 100%, cover	表头容器背景尺寸
--pmth-table-header-container-bg-position	center, center, center	表头容器背景位置
--pmth-table-header-container-bg-repeat	no-repeat, no-repeat, no-repeat	表头容器背景重复
--pmth-header-cell-color	$color-text-invert-light	单元格文字颜色
--pmth-sort-arrow-color	#adb5bd	排序箭头颜色
--pmth-sort-arrow-active-color	$color-surface-brand	激活排序箭头颜色

# 字体系统 (Typography)

名称	默认值	描述
--pmth-header-cell-font-size	$font-size-xs	单元格字体大小
--pmth-header-cell-font-weight	$font-weight-regular	单元格字体粗细
--pmth-header-cell-line-height	1.5	单元格行高

# 其他属性 (Others)

名称	默认值	描述
--pmth-table-header-position	relative	表头定位
--pmth-table-header-container-position	relative	表头容器定位
--pmth-header-cell-position	relative	单元格定位
--pmth-sort-icon-position	relative	排序图标定位
--pmth-header-cell-sortable-user-select	none	可排序单元格用户选择
--pmth-header-cell-justify-content-left	flex-start	单元格左对齐
--pmth-header-cell-justify-content-center	center	单元格居中对齐
--pmth-header-cell-justify-content-right	flex-end	单元格右对齐

← MatchSignQRCode MatchTeamInfoItem →