最近做统计数据展示的功能，要频繁的使用表头有嵌套的表格样式，每次手动写这样的表头确实很恶心。所以做了一下封装，只要传入约定好的表头配置，就可以得到一个多级表头表格。

DynamicTable

<template>
  <div>
    <el-table :data="tableData" border stripe highlight-current-row>
      <template v-for="(item, index) in tHeader">
        <el-table-column v-if="item.children" :label="item.label" align="center">
          <el-table-column v-for="(c, i) in item.children" :prop="c.prop" :key="i" align="center">
            <template slot="header">
              <span>{{ c.label }}</span>
              <el-tooltip v-if="c.tip" effect="dark" :content="c.tip" placement="top">
                <i style="margin-left: 2px" class="el-icon-question"></i>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-link v-if="c.link" type="primary" @click="Detail(scope.row, c)">
                {{ c.link_name || scope.row[c.prop] || '0' }}
              </el-link>
              <span v-else>{{ scope.row[c.prop] }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column v-else :prop="item.prop" :label="item.label" :key="index" align="center" :fixed="index < 1">
          <template slot="header">
            <span>{{ item.label }}</span>
            <el-tooltip v-if="item.tip" effect="dark" :content="item.tip" placement="top">
              <i style="margin-left: 2px" class="el-icon-question"></i>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <el-link v-if="item.link" type="primary" @click="Detail(scope.row, item)">
              {{ item.link_name || scope.row[item.prop] || '0' }}
            </el-link>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'DynamicTable',
  props: {
    tableData: {
      type: Array
    },
    tHeader: {
      type: Array
    }
  },
  methods: {
    Detail(row, c) {
      this.$emit('detail', row, c)
    }
  }
}
</script>

<style lang="scss" scoped></style>

可见这个组件接收两个props，tableData为表格行数据，tHeader为表头配置数据。

组件调用

<template>
  <div>
    <DynamicTable :tableData="tableData" :tHeader="tHeader" :key="Math.random().toString().slice(3, 8)" />
  </div>
</template>

<script>
import DynamicTable from './DynamicTable.vue'

export default {
  name: 'Analyze',
  components: {
    DynamicTable
  },
  data() {
    return {
      tHeader: [
        {
          label: '作业名称',
          prop: 'work_name',
          link: this.searchModel.class_id || this.searchModel.group_id ? false : true
        },
        { label: '作业类型', prop: 'work_type_name' },
        {
          label: '作业提交',
          prop: '',
          children: [
            {
              label: '应交作业学员',
              prop: 'total_count'
            },
            {
              label: '已交作业学员',
              prop: 'submit_count'
            },
            {
              label: '未交作业学员',
              prop: 'un_submit_count'
            },
            {
              label: '作业提交率',
              prop: 'str_submit_percent'
            }
          ]
        },
        {
          label: '全勤情况',
          prop: '',
          children: [
            {
              label: '全部小组',
              prop: 'group_count'
            },
            {
              label: '全勤小组',
              prop: 'perfect_group_count'
            },
            {
              label: '未全勤小组',
              prop: 'un_perfect_group_count'
            },
            {
              label: '全勤率',
              prop: 'str_perfect_group_percent'
            }
          ]
        }
      ],
    }
  }
}
</script>

这样就可以得到下面这样的表格：