element ui vue 表格动态生成多级表头

1. 效果展示

2. 官方实现多表头方法

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column label="地址">
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

直接写死在了html中，不好进行动态生成，如果能根据数据动态生成效果就更好了，下面对代码进行封装。

3. el-table封装如下：

MyTable.vue

<template>
  <div class="my-table">
    <el-table :data="data" style="width: 100%" max-height="431px">
      <my-column v-for="(item,index) in col" :key="index" :col="item"></my-column>
    </el-table>
  </div>
</template>

<script>
import MyColumn from './MyColumn'
export default {
  components: {
    MyColumn
  },
  props: {
    col: {
      type: Array
    },
    data: {
      type: Array
    }
  }
}
</script>
<style scoped>
</style>

4. el-table-column封装如下：
MyColumn.vue

<template>

  <el-table-column :prop="col.prop"
    :label="col.label" width="150"
    align="center" >

    <template v-if="col.children">
      <my-column v-for="(item, index) in col.children" align="center" width="150"
        :key="index"
        :col="item"></my-column>
    </template>

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

<script>
export default {
  name: 'MyColumn',
  props: {
    col: {
      type: Object
    }
  }
}
</script>
<style scoped>
</style>

5. 在业务代码中调用

<template>
  <div>
    <my-table :col="headData"
      :data="tableData">
    </my-table>
  </div>
</template>

<script>
import MyTable from '@/components/MyTable'
export default {
  components: {
    MyTable
  },
  data() {
    return {
      headData: [
        {
          prop: 'year',
          label: '时间'
        },
        {
          label: '中国',
          children: [
            {
              prop: 'hospitalNum1',
              label: '医院数量（个）'
            },
            {
              prop: 'doctorNum1',
              label: '医生数量（个）'
            },
            {
              prop: 'nursingHomeNum1',
              label: '护理院数量（个）'
            },
            {
              prop: 'outpatientDepartmentNum1',
              label: '门诊数量（个）'
            }
          ]
        },
        {
          label: '北京',
          children: [
            {
              prop: 'hospitalNum2',
              label: '医院数量（个）'
            },
            {
              prop: 'doctorNum2',
              label: '医生数量（个）'
            },
            {
              prop: 'nursingHomeNum2',
              label: '护理院数量（个）'
            },
            {
              prop: 'outpatientDepartmentNum2',
              label: '门诊数量（个）'
            }
          ]
        },
        {
          label: '山东省',
          children: [
            {
              prop: 'hospitalNum3',
              label: '医院数量（个）'
            },
            {
              prop: 'doctorNum3',
              label: '医生数量（个）'
            },
            {
              prop: 'nursingHomeNum3',
              label: '护理院数量（个）'
            },
            {
              prop: 'outpatientDepartmentNum3',
              label: '门诊数量（个）'
            }
          ]
        },
        {
          label: '利津县',
          children: [
            {
              prop: 'hospitalNum4',
              label: '医院数量（个）'
            },
            {
              prop: 'doctorNum4',
              label: '医生数量（个）'
            },
            {
              prop: 'nursingHomeNum4',
              label: '护理院数量（个）'
            },
            {
              prop: 'outpatientDepartmentNum4',
              label: '门诊数量（个）'
            }
          ]
        }
      ],
      tableData: [
        {
          year: '2021年',
          hospitalNum1: '001',
          doctorNum1: '002',
          nursingHomeNum1: '-1',
          outpatientDepartmentNum1: '-2',
          hospitalNum2: '002',
          doctorNum2: '002',
          nursingHomeNum2: '-2',
          outpatientDepartmentNum2: '-2',
          hospitalNum3: '003',
          doctorNum3: '002',
          nursingHomeNum3: '-3',
          outpatientDepartmentNum3: '-2',
          hospitalNum4: '004',
          doctorNum4: '002',
          nursingHomeNum4: '-4',
          outpatientDepartmentNum4: '-2'
        },
        {
          year: '2022年',
          hospitalNum1: '001',
          doctorNum1: '002',
          nursingHomeNum1: '-1',
          outpatientDepartmentNum1: '-2',
          hospitalNum2: '002',
          doctorNum2: '002',
          nursingHomeNum2: '-2',
          outpatientDepartmentNum2: '-2',
          hospitalNum3: '003',
          doctorNum3: '002',
          nursingHomeNum3: '-3',
          outpatientDepartmentNum3: '-2',
          hospitalNum4: '004',
          doctorNum4: '002',
          nursingHomeNum4: '-4',
          outpatientDepartmentNum4: '-2'
        },
        {
          year: '2023年',
          hospitalNum1: '001',
          doctorNum1: '002',
          nursingHomeNum1: '-1',
          outpatientDepartmentNum1: '-2',
          hospitalNum2: '002',
          doctorNum2: '002',
          nursingHomeNum2: '-2',
          outpatientDepartmentNum2: '-2',
          hospitalNum3: '003',
          doctorNum3: '002',
          nursingHomeNum3: '-3',
          outpatientDepartmentNum3: '-2',
          hospitalNum4: '004',
          doctorNum4: '002',
          nursingHomeNum4: '-4',
          outpatientDepartmentNum4: '-2'
        },
        {
          year: '2024年',
          hospitalNum1: '001',
          doctorNum1: '002',
          nursingHomeNum1: '-1',
          outpatientDepartmentNum1: '-2',
          hospitalNum2: '002',
          doctorNum2: '002',
          nursingHomeNum2: '-2',
          outpatientDepartmentNum2: '-2',
          hospitalNum3: '003',
          doctorNum3: '002',
          nursingHomeNum3: '-3',
          outpatientDepartmentNum3: '-2',
          hospitalNum4: '004',
          doctorNum4: '002',
          nursingHomeNum4: '-4',
          outpatientDepartmentNum4: '-2'
        },
        {
          year: '2025年',
          hospitalNum1: '001',
          doctorNum1: '002',
          nursingHomeNum1: '-1',
          outpatientDepartmentNum1: '-2',
          hospitalNum2: '002',
          doctorNum2: '002',
          nursingHomeNum2: '-2',
          outpatientDepartmentNum2: '-2',
          hospitalNum3: '003',
          doctorNum3: '002',
          nursingHomeNum3: '-3',
          outpatientDepartmentNum3: '-2',
          hospitalNum4: '004',
          doctorNum4: '002',
          nursingHomeNum4: '-4',
          outpatientDepartmentNum4: '-2'
        }
      ]
    }
  }
}
</script>
<style>
</style>

注意：本文归作者所有，未经作者允许，不得转载