element Ui动态加载多列表头和各列数据

要实现动态加载多列表头和各列数据，可以使用 Element UI 的表格组件和动态组件，具体步骤如下：

1. 在页面中引入 Element UI 的表格组件

<template>
  <el-table :data="tableData" :height="200">
    <!-- 列表头 -->
    <el-table-column v-for="(header, index) in tableHeaders" :key="index" :label="header.label">
      <!-- 列数据 -->
      <template v-for="(col, colIndex) in header.columns">
        <el-table-column :key="colIndex" :label="col.label" :prop="col.prop">
          <template slot-scope="scope">{{ scope.row[col.prop] }}</template>
        </el-table-column>
      </template>
    </el-table-column>
  </el-table>
</template>

2. 在 Vue 实例中定义数据

export default {
  data() {
    return {
      // 列表头数据
      tableHeaders: [
        {
          label: '表头一',
          columns: [
            {
              label: '列一',
              prop: 'col1'
            },
            {
              label: '列二',
              prop: 'col2'
            }
          ]
        },
        {
          label: '表头二',
          columns: [
            {
              label: '列三',
              prop: 'col3'
            },
            {
              label: '列四',
              prop: 'col4'
            }
          ]
        }
      ],
      // 列数据
      tableData: [
        {
          col1: '数据1-列1',
          col2: '数据1-列2',
          col3: '数据1-列3',
          col4: '数据1-列4'
        },
        {
          col1: '数据2-列1',
          col2: '数据2-列2',
          col3: '数据2-列3',
          col4: '数据2-列4'
        }
      ]
    }
  }
}

3. 使用动态组件加载表格组件

<template>
  <div>
    <component :is="dynamicComponent"></component>
    <el-button @click="changeDynamicComponent">切换表格</el-button>
  </div>
</template>

<script>
import Vue from 'vue'
import Table from '@/components/Table'

export default {
  data() {
    return {
      dynamicComponent: 'el-table'
    }
  },
  methods: {
    changeDynamicComponent() {
      // 切换动态组件
      this.dynamicComponent = 'table-component'
    }
  },
  components: {
    'table-component': Vue.extend(Table)
  }
}
</script>

这样就可以实现动态加载多列表头和各列数据的表格组件了。