vue+elementui table表格递归生成多级表头

前言

近期在写一个后台管理系统的项目,需要表格动态生成多级表头,项目中使用了递归组件,自己总结一下加深记忆.话不多说,直接上代码.

1.tableView.vue

<template>
  <div>
    <table-item :tableData="tableData" :col="col"></table-item>
  </div>
</template>
<script>
import tableItem from "./tableItem";
export default {
  name: "TableView",
  components: {
    tableItem,
  },
  data() {
    return {
        //树型结构表头数据
      col: [
        {
          prop: "date",
          label: "日期",
        },
        {
          label: "配送信息",
          children: [
            {
              prop: "name",
              label: "姓名",
            },
            {
              label: "地址",
              children: [
                {
                  prop: "province",
                  label: "省份",
                },
                {
                  prop: "city",
                  label: "市区",
                },
                {
                  prop: "address",
                  label: "城镇",
                },
              ],
            },
          ],
        },
        {
          prop: "remark",