element表格动态多级表头(基于VUE)

element表格动态多级表头，存在单项表头和多项表头

效果图：
代码直接copy：

<el-table :data="tableDataList" border>
      <el-table-column v-for="(item, index) in columns" :key="index" :label="item.label" width="180">
        <template    slot-scope="scope">
          {
    
    {
    
    scope.row[item.prop]}}
        </template>
        <template >
          <el-table-column v-for="(subItem, subIndex) in item.children" :key="subIndex" :label="subItem.label" width="90">
            <template slot-scope="scope">
              {
    
    {
    
     scope.row[subItem.prop] }}
            </template>
          </el-table-column>
        </template>

      </el-table-column>
    </el-table>

     columns:[
        {
    
    
          label:'正表头1',
          prop:'name3',
          children:[{
    
    
            label:'负表头1',
            prop:'name1'
          },{
    
    
            label:'负表头2',
            prop:'name2'
          }]
        },
        {
    
    
          label:'正表头2',
          prop:'name3',
          children:[]
        }
      ],
      tableDataList:[
        {
    
    
          name1:'负表头1内容1',
          name2:'负表头2内容12',
          name3:'你TM谁1',
        },
        {
    
    
          name1:'负表头1内容2',
          name2:'负表头2内容2',
          name3:'你TM谁2',
        },
        {
    
    
          name1:'负表头1内容3',
          name2:'负表头2内容3',
          name3:'你TM谁3',
        }
      ],

总结：适合表头和数据是从数据库读取的，也适合存在单个表头和多个表头一起的。