el-table动态多级表头

el-table是基于Vue的一个表格组件，可以实现多种表格展示需求。在el-table中，如果需要展示多级表头，可以使用动态多级表头来实现。

动态多级表头实现的关键是通过props属性中的columns参数来动态生成表头。在columns中，可以定义每个表头所占据的列数、表头名称以及子表头等信息。而子表头的定义同样是在columns中进行，即一个表头可以包含多个子表头，子表头之间通过colspan来控制跨列数量，通过rowspan来控制跨行数量。

例如，以下代码中定义了一个4列的表格，其中有两级表头。其中一级表头‘姓名’和‘年龄’分别占用两列，另一级表头‘性别’和‘所在城市’分别是‘姓名’和‘年龄’的子表头。

<el-table
  :data="tableData"
  :height="250"
  :columns="columns"
></el-table>

<script>
  export default {
    data() {
      return {
        tableData: [
          { name: '小红', age: 19, sex: '女', city: '北京' },
          { name: '小明', age: 21, sex: '男', city: '上海' },
          { name: '小王', age: 18, sex: '男', city: '广州' },
          { name: '小李', age: 20, sex: '女', city: '深圳' }
        ],
        columns: [
          {
            label: '姓名',
            colspan: 2,
            children: [
              {
                label: '性别',
                prop: 'sex',
              },
              {
                label: '所在城市',
                prop: 'city'
              }
            ]
          },
          {
            label: '年龄',
            colspan: 2,
            prop: 'age'
          },
        ]
      };
    }
  }
</script>

通过以上代码实现，就可以在el-table中实现动态多级表头，进而满足不同的表格展示需求。