div模拟表格，递归组件渲染

最终效果图：

<template>
  <div class="page">
    <div class="table">
      <tableItem  v-for="item in list" :key="item.id" :data="item"> </tableItem>
    </div>
  </div>
</template>

<script>
import tableItem from "./tableItem.vue";
export default {
  components: { tableItem },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "655通道",
          children: [
            {
              id: "1-1",
              name: "1排",
              children: [
                {
                  id: "1-1-1",
                  name: "1行",
                  last:true,
                  children: [
                    { id: "1-1-1-1", name: "239", check: false },
                    { id: "1-1-1-2", name: "240", check: false },
                    // { id: "1-1-1-3", name: "241", check: false },
                  ],
                },
                {
                  id: "1-1-1",
                  name: "2行",
                  last:true,
                  children: [
                    { id: "1-1-2-1", name: "2392", check: false },
                    { id: "1-1-2-2", name: "2402", check: false },
                    // { id: "1-1-1-3", name: "241", check: false },
                  ],
                },
              ],
            },
            {
              id: "1-2",
              name: "2排",
              children: [
                {
                  id: "1-1-2",
                  name: "2行",
                  last:true,
                  children: [
                    { id: "2-1-1-1", name: "2391", check: false },
                    { id: "2-1-1-2", name: "2402", check: false },
                  ],
                },
              ],
            },
          ],
        },
        {
          id: 2,
          name: "656通道",
          children: [
            {
              id: "2-1",
              name: "2排",
              children: [
                {
                  id: "2-1-1",
                  name: "1行",
                  last:true,
                  children: [
                    { id: "2-1-1-1", name: "241", check: false },
                    { id: "2-1-1-2", name: "242", check: false },
                  ],
                },
              ],
            },
            {
              id: "1-2",
              name: "2排",
              children: [
                {
                  id: "1-1-2",
                  name: "2行",
                  last:true,
                  children: [
                    { id: "2-1-1-1", name: "239", check: false },
                    { id: "2-1-1-2", name: "240", check: false },
                  ],
                },
              ],
            },
          ],
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less">
.page {
  padding: 50px;
  
  .table {
    display: inline-block;
    border-top: 1px solid #dedede;
  }
  .column {
    flex-direction: column;
  }
}
</style>

tableItem组件：

<template>
  <div class="table_item df " :class="[data.children ?' ':'']">
    <div v-if="data.children" class="df ">
        <div class="item_cell_content df-cc">{{data.name}}</div>
        <div class="df " :class="[data.last?'line':'column']">
            <tableItem  v-for="item in data.children" :key="item.id" class="df column"  :data="item"></tableItem>

        </div>
    </div>
    <div class="item_cell df-cc column" v-else>
      <div class="icon"><el-checkbox v-model="data.check"></el-checkbox></div>
      <div class="label">{{data.name}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tableItem",
  props: {
    data: {
        type:Object,
        default: ()=> {
           return{
             id:'',
            name:'',
            last:false,
            children:[]
           }
        }
    },
  },
  methods: {},
};
</script>
<style lang="less">


.table_item {
    
    .item_cell_content {
        width: 60px;
        border: 1px solid #dedede ;
        border-right: none;
        border-top: none;
    }
    .item_cell {
        font-size: 14px;
        color: #000;
        width: 60px;
        height:60px;
        border: 1px solid #dedede;
        border-top: none;
        border-left: none;
        border-right: none;
    }
    .line {
        border-left: 1px solid #dedede;
        border-right: 1px solid #dedede;
    }
}
</style>