利用render函数实现轮循嵌套

具体实现如下：
数据:

const tableColumn = [
  {
    "label": "区域",
    "width": "200",
    "prop": "townshipName"
  },
  {
    "label": "区域二",
    "children": [
      {
        "label": "1.小标题二",
        "width": "150",
        "prop": "helpingTotalFund"
      }
    ]
  },
  {
    "label": "二、区域三",
    "children": [
      {
        "label": "1.小标题三",
        "children": [
          {
            "label": "①小小标题",
            "width": "250",
            "prop": "guideCompanies"
          }
        ]
      }
    ]
  }
]

html

<elTableColumns :item="item" v-for="(item, index) in tableColumn" :key="index"></elTableColumns>

js:

export default {
  props: {
    item: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      renderFn: null
    }
  },
  render(h) {
    this.renderFn = h
    return this.returnChildren(this.item)
  },
  methods: {
    returnChildren(item) {
      if (item.children && item.children.length > 0) {
        const arr = []
        item.children.forEach((item2) => {
          arr.push(this.returnChildren(item2))
        })
        return this.renderFn(
          'el-table-column',
          {
            attrs: {
              width: item.width,
              prop: item.prop,
              label: item.label
            }
          },
          arr
        )
      } else {
        return this.renderFn('el-table-column', {
          attrs: {
            width: item.width,
            prop: item.prop,
            label: item.label
          }
        })
      }
    }
  }
}