element封装多级表格

一、看效果

二、实现步骤
1、创建文件夹

2、MyColumn.vue文件

<template>

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

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

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

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

3、MyTable.vue文件

<template>
  <div class="my-table">
    <el-table :data="data">
      <MyColumn v-for="(item,index) in col" :key="index" :col="item"></MyColumn>
    </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、index.vue文件

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

<script>
  import MyTable from './components/MyTable'
  export default {
    components: {
      MyTable
    },
    data() {
      return {
        // 表头数据
        col: [{
            prop: 'date'
          },
          {
            label: '设计数据',
            prop: 'name'
          },
          {
            label: '标准数据',
            prop: 'name'
          },
          {
            label: '牌号1数据',
            children: [{
              prop: 'name',
              label: '2组',
              children: [{
                prop: 'name',
                label: '2组'
              }, {
                prop: 'province',
                label: '2组'
              }, {
                prop: 'city',
                label: '2组'
              }, {
                prop: 'zip',
                label: '2组'
              }]
            }, {
              prop: 'province',
              label: '1组'
            }, {
              prop: 'city',
              label: '1组'
            }, {
              prop: 'zip',
              label: '1组'
            }]
          },
          {
            label: '牌号2数据',
            children: [{
              prop: 'name'
            }, {
              prop: 'name'
            }, {
              prop: 'name'
            }, {
              prop: 'name'
            }]
          }
        ],
        // 表格数据
        data: [{
            date: '试验编号',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            date: '试样状态',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          },
          {
            date: '试验温度',
            name: '王小虎',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }
        ]
      }
    }
  }

</script>
<style>
</style>

三、完成实现效果