elementUI table 多级表头使用

ElementUI 的 table 组件支持多级表头，可以通过设置 `columns` 属性来实现。

每个表头都可以是一个对象，包含以下属性：

- `label`：表头显示的文本
- `prop`：对应列内容的字段名
- `children`：子表头数组，用于实现多级表头

以下是一个三级表头的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="一级表头" rowspan="2">
      <el-table-column prop="name" label="二级表头" colspan="2"></el-table-column>
      <el-table-column prop="age" label="二级表头"></el-table-column>
    </el-table-column>
    <el-table-column prop="address" label="一级表头" colspan="3"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
        },
      ],
    };
  },
};
</script>

在上面的代码中，我们定义了一个三级表头，其中第一列为一级表头，包含两个二级表头和一个三级表头。第二列为一个一级表头，包含三个二级表头。其中 `rowspan` 和 `colspan` 属性用于设置表头的合并行数和列数。