多行表头撑起表格的门面，Ant Design Vue Table 实现高效显示和管理！

2023-02-14 12:56:41

多行表头：告别表格读写烦恼，让数据一目了然！

简介

表格控件是展示数据的一种常用工具，但当数据内容过多时，传统表格控件往往会出现表头堆叠或水平滚动的问题，给阅读带来了极大的不便。本文将介绍如何使用 Ant Design Vue Table 轻松实现多行表头，让表格数据更加清晰直观。

第一步：导入Table组件

import { Table } from 'ant-design-vue'

第二步：配置列选项

表头多行显示的关键在于配置列选项。使用 columns 属性，将表头列组织成嵌套结构。每个父列表示一行表头，子列表示该行中的单元格。

columns: [
  {
    title: '标题1',
    children: [
      {
        title: '标题1-1',
        dataIndex: 'title1-1',
        width: 100
      },
      {
        title: '标题1-2',
        dataIndex: 'title1-2',
        width: 100
      }
    ]
  },
  {
    title: '标题2',
    children: [
      {
        title: '标题2-1',
        dataIndex: 'title2-1',
        width: 100
      },
      {
        title: '标题2-2',
        dataIndex: 'title2-2',
        width: 100
      }
    ]
  }
]

第三步：设置表格边框

为了增强多行表头的视觉效果，可以在表格上添加边框。通过设置 bordered 属性为 true，即可实现：

<Table
  :columns="columns"
  :data="data"
  bordered
/>

示例代码

完整代码示例如下：

<template>
  <div>
    <Table :columns="columns" :data="data" bordered />
  </div>
</template>

<script>
import { Table } from 'ant-design-vue'

export default {
  components: { Table },
  data() {
    return {
      columns: [
        {
          title: '标题1',
          children: [
            {
              title: '标题1-1',
              dataIndex: 'title1-1',
              width: 100
            },
            {
              title: '标题1-2',
              dataIndex: 'title1-2',
              width: 100
            }
          ]
        },
        {
          title: '标题2',
          children: [
            {
              title: '标题2-1',
              dataIndex: 'title2-1',
              width: 100
            },
            {
              title: '标题2-2',
              dataIndex: 'title2-2',
              width: 100
            }
          ]
        }
      ],
      data: [
        {
          title1-1: '数据1-1',
          title1-2: '数据1-2',
          title2-1: '数据2-1',
          title2-2: '数据2-2'
        },
        {
          title1-1: '数据2-1',
          title1-2: '数据2-2',
          title2-1: '数据3-1',
          title2-2: '数据3-2'
        }
      ]
    }
  }
}
</script>

优点

清晰直观：多行表头可以将复杂数据按层次组织，让表格更易于理解。
节省空间：无需水平滚动，节省了表格空间，避免了视觉上的混乱。
可扩展性强：无论数据量大小，多行表头都可以轻松扩展，适应不同的数据展示需求。

常见问题解答

如何让子列的宽度相等？

答：在列配置中使用 width 属性设置子列的宽度，例如 width: 100。
如何对表格进行排序？

答：可以使用 sorter 属性配置排序功能，例如 sorter: (a, b) => a.name.localeCompare(b.name)。
如何筛选表格数据？

答：可以使用 filter 属性配置筛选功能，例如 filter: (record) => record.age > 18。
如何自定义表头样式？

答：可以使用 titleClassName 和 childrenClassName 属性自定义表头样式，例如 titleClassName: 'text-align-center'。
多行表头支持跨列合并吗？

答：是的，多行表头支持跨列合并。可以通过使用 colSpan 属性配置跨列合并，例如 colSpan: 2。