vue循环未知层数的v-for标签加载

• 第一步：我们需要定义一个组件

<template>
  <div>
    <a-row>
      	<a-col span="20" :style="`padding-left: ${15 * parItem.layer}px;`">
        	{{ parItem.title }}
    	</a-col>
    </a-row>
    <a-row>
      <left-tree-item
        :key="`children-${item.key}-${index}`"
        v-show="parItem.children.length > 0"
        v-for="(item, index) in parItem.children"
        :parItem="item"
      />
    </a-row>
  </div>
</template>
<script>
export default {
  name: 'LeftTreeItem',
  components: {},
  props: {
    parItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    
  }
}
</script>

以上该组件有个特点，就是它发现如果children里面还有数据，则会再次循环自己
从而实现了未知层数的 v-for 标签加载

• 最后看看如何在最外层调用它

<left-tree-item :key="`children-${item.key}-${index}`" v-for="(item, index) in leftTreeData" :parItem="item" />

//记得引用和注册
import LeftTreeItem from './LeftTreeItem'
components: {
    LeftTreeItem
},
data() {
  return {
     leftTreeData: [{
              key: '1',
              title: '1',
              layer: 0,
              children: [{
                  key: '1-1',
                  title: '1-1',
                  layer: 1
                },{
                  key: '1-2',
                  title: '1-2',
                  layer: 1
                }]
            },{
              key: '2',
              title: '2',
              layer: 0,
              children: [{
                  key: '2-1',
                  title: '2-1',
                  layer: 1
                },{
                  key: '2-2',
                  title: '2-2',
                  layer: 1
                }]
            }]
  }
}

数组对象里面加上的layer属性，是为了让循环的时候有缩进效果，可加可不加

• 最后附上效果图