vue中实现动态表格嵌套--行数列数均不确定

很简单!   

      很简单!   

            很简单!   

别慌，先看效果~

 part1：html

      <table class="table1">
        <tr class="title">
          <th>战斗力标准一级</th>
          <th class="w200">战斗力标准二级</th>
          <th class="w200">战斗力标准三级</th>
          <th>战斗力标准四级</th>
        </tr>
        <tr v-for="(item,i) in testdata">
          <td class="w200"><span>{{item.name}}</span></td>
          <td colspan="3">
            <table class="table2">
              <tr v-for="(par, j) in item.nodes">
                <td class="w200"><span>{{par.name}}</span></td>
                <td>
                  <table class="table3">
                    <tr v-for="val in par.nodes">
                      <td class="w200"><span>{{val.name}}</span></td>
                      <td>
                        <table class="table4">
                          <th v-if="i==0"><span>指标属性</span> </th>
                          <th v-if="i==0"><span>指标名称</span></th>
                          <th v-if="i==0"><span>指标值</span></th>
                          <tr v-for="child in val.nodes">
                            <td class="w200"><span>{{child.name}}</span></td>
                            <td class="w200"><span>{{child.name}}</span></td>
                            <td class="w200"><span>{{child.name}}</span></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>

注意：你的表格有几列，就定义几个嵌套表格，我的四列，所以嵌套了四层

 part2：样式-这里vue里面用的是less

.tableMain {
    margin: 1% auto;
    width: 94%;
    height: 500px;
    overflow: auto;
     table {
      width: 100%;
      border-collapse: collapse;
      text-align: center;
      th {
        text-align: center;
      }
      .title{
        th{
          padding: 15px 0
        }
      }
    }
     table th,   //以下部分是为了去掉重叠的边框，重点
    td {
      font-size: 14px;
      border: 1px solid #999;
    }
    .table2 tr td:nth-child(1) {
      border-left: 0;
    }
    .table2 tr td:nth-last-child(1) {
      border-right: 0;
    }
    .table2 tr:nth-child(1) td {
      border-top: 0;
    }
    .table2 tr:nth-last-child(1) td {
      border-bottom: 0;
    }
    .table4 tr {
      border-bottom: 1px solid #999;
    }
    .table4 tr:nth-last-child(1) {
      border-bottom: 0;
    }
    .table4 {
      span{
        padding: 10px 0;
        display: block
      }
      th {
        background: #e4f0fe;
        border-top: 0;
        &:nth-child(1) {
          border-left: 0;
        }
        &:nth-child(3) {
          border-right: 0;
        }
      }
    }
    .w200 {   //定义一个宽，为了使表头与下面的主题表格部分对齐
      width: 160px;
    }
  }

 part3：测试数据

testdata: [
        {
          id: 1,
          name: "一级名称",
          superiorId: 0,
          type: null,
          category: null,
          nodes: [
            {
              id: 3,
              name: "二级名称",
              superiorId: 1,
              type: null,
              category: null,
              nodes: [
                {
                  id: 5,
                  name: "三级名称",
                  superiorId: 3,
                  type: null,
                  category: null,
                  nodes:[
                    {
                      id: 71,
                      indexName: "测试3",
                      superiorId: 5,
                      type: null,
                      category: null,
                    },
                    {
                      id: 72,
                      indexName: "测试4",
                      superiorId: 5,
                      type: null,
                      category: null,
                    },
                    {
                      id: 73,
                      indexName: "测试5",
                      superiorId: 5,
                      type: null,
                      category: null,
                    },
                  ]
                }
              ]
            }
          ]
        },
        {
          id: 2,
          name: "一级名称",
          superiorId: 0,
          type: null,
          category: null,
          nodes: [
            {
              id: 4,
              name: "二级名称",
              superiorId: 2,
              type: null,
              category: null,
              nodes: [
                {
                  id: 6,
                  name: "三级名称",
                  superiorId: 4,
                  type: null,
                  category: null
                }
              ]
            }
          ]
        },
        {
          id: 11,
          name: "一级名称",
          superiorId: 0,
          type: null,
          category: null,
          nodes: [
            {
              id: 12,
              name: "二级名称",
              superiorId: 11,
              type: null,
              category: null,
              nodes: [
                {
                  id: 14,
                  name: "三级名称",
                  superiorId: 12,
                  type: null,
                  category: null,
                  nodes:[
                    {
                      id: 74,
                      indexName: "测试5",
                      superiorId: 14,
                      type: null,
                      category: null,
                    },{
                      id: 75,
                      indexName: "测试5",
                      superiorId: 14,
                      type: null,
                      category: null,
                    },{
                      id: 76,
                      indexName: "测试5",
                      superiorId: 14,
                      type: null,
                      category: null,
                    },
                  ]
                }
              ]
            }
          ]
        }
      ],

结束~是不是很简单~