Ant Design Vue a-table如何实现表头换行或双表头？

解决表头换行问题 #

直接在columns的title字段中拼接<br/>会被转义无法生效，可通过以下两种方式实现单个表头单元格的双行效果：

方式1：使用表头插槽（推荐，无JSX依赖）

通过headerCell插槽自定义表头内容，自由控制多行结构：

<template>
  <a-table :columns="columns" :data-source="data">
    <!-- 自定义表头 -->
    <template #headerCell="{ column }">
      <div v-if="column.key === 'name'">
        <div>Name</div>
        <div style="font-size:12px;color:#666;">（别名）</div>
      </div>
      <div v-else-if="column.key === 'age'">
        <div>Age</div>
        <div style="font-size:12px;color:#666;">（周岁）</div>
      </div>
      <div v-else-if="column.key === 'gender'">
        <div>Gender</div>
        <div style="font-size:12px;color:#666;">（性别码）</div>
      </div>
      <span v-else>{{ column.title }}</span>
    </template>

    <!-- 自定义单元格双数据 -->
    <template #bodyCell="{ column, record }">
      <div v-if="column.key === 'name'">
        <span>{{ record.name }}</span>
        <span class="sub-data">{{ record.alias }}</span>
      </div>
      <div v-else-if="column.key === 'age'">
        <span>{{ record.age }}</span>
        <span class="sub-data">{{ record.birthYear }}</span>
      </div>
      <div v-else-if="column.key === 'gender'">
        <span>{{ record.gender }}</span>
        <span class="sub-data">{{ record.genderCode }}</span>
      </div>
    </template>
  </a-table>
</template>

方式2：使用JSX定义表头（需项目支持JSX）

若项目已配置JSX支持，可直接在columns的title字段中编写JSX结构：

columns: [
  { 
    title: <div><div>Name</div><div style="font-size:12px;color:#666;">（别名）</div></div>, 
    dataIndex: 'name', 
    key: 'name' 
  },
  { 
    title: <div><div>Age</div><div style="font-size:12px;color:#666;">（周岁）</div></div>, 
    dataIndex: 'age', 
    key: 'age' 
  },
  { 
    title: <div><div>Gender</div><div style="font-size:12px;color:#666;">（性别码）</div></div>, 
    dataIndex: 'gender', 
    key: 'gender' 
  }
]

完整脚本与样式 #

<script>
export default {
  data() {
    return {
      columns: [
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
        { title: 'Gender', dataIndex: 'gender', key: 'gender' }
      ],
      data: [
        {
          name: 'John Brown',
          alias: 'JB',
          age: 32,
          birthYear: 1992,
          gender: 'Male',
          genderCode: 'M'
        },
        {
          name: 'Jindel Rose',
          alias: 'JR',
          age: 40,
          birthYear: 1984,
          gender: 'Female',
          genderCode: 'F'
        }
      ]
    }
  }
}
</script>

<style scoped>
/* 表头多行对齐样式 */
.ant-table-thead > tr > th div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* 单元格双数据样式 */
.sub-data {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
</style>

说明 #

• 表头插槽方式无需依赖JSX，兼容性更好，适合大多数Vue项目；
• 单元格双数据通过bodyCell插槽实现，配合样式可让双数据排版更清晰；
• 自定义样式可根据需求调整字体大小、颜色、间距等细节。

内容的提问来源于stack exchange，提问作者Keyboard Corporation