elementplus 二级表头动态生成

在 Element Plus 中，可以通过 `el-table-column` 组件的 `children` 属性来实现二级表头的动态生成。具体步骤如下：

1. 在 `data` 中定义表格的列数据，包括一级表头和二级表头的信息，例如：

   data() {
     return {
       tableData: [
         {
           date: '2021-10-01',
           name: 'John Brown',
           address: 'New York No. 1 Lake Park',
           children: [
             {
               date: '2021-10-01',
               name: 'John Brown',
               address: 'New York No. 1 Lake Park'
             },
             {
               date: '2021-10-01',
               name: 'Jim Green',
               address: 'London No. 1 Lake Park'
             }
           ]
         },
         // ...
       ],
       columns: [
         {
           label: '日期',
           prop: 'date'
         },
         {
           label: '姓名',
           prop: 'name'
         },
         {
           label: '地址',
           prop: 'address'
         }
       ]
     }
   }

2. 在模板中使用 `el-table` 组件，并在其中使用 `el-table-column` 组件来渲染表格的列。对于一级表头，直接使用 `el-table-column` 组件，并将 `prop` 属性设置为对应的列数据的属性名。对于二级表头，使用 `el-table-column` 组件，并将 `children` 属性设置为对应的列数据的 `children` 属性，然后在 `el-table-column` 组件中再次使用 `el-table-column` 组件来渲染二级表头。例如：

   <template>
     <el-table :data="tableData">
       <el-table-column v-for="(column, index) in columns" :key="index" :label="column.label" :prop="column.prop">
         <template v-if="column.children" slot="header">
           <el-table-column v-for="(child, childIndex) in column.children" :key="childIndex" :label="child.label" :prop="child.prop"></el-table-column>
         </template>
       </el-table-column>
     </el-table>
   </template>

3. 在需要动态生成二级表头的时候，修改对应列数据的 `children` 属性即可。例如：

   this.columns[0].children = [
     {
       label: '日期1',
       prop: 'date'
     },
     {
       label: '日期2',
       prop: 'date'
     }
   ]

这样就可以动态生成二级表头了。