table 跨行数据显示

实现效果：

代码：

<div>
    <b-table-simple borderless ref="table" responsive="md" caption-top>
        <b-thead class="th-lightblue">
        <b-tr>
            <b-th>row</b-th>
            <b-th>row</b-th>
            <b-th>row</b-th>
            <b-th>row</b-th>
        </b-tr>
        </b-thead>
        <b-tbody>
            <template  v-for="(item,index) in Data">
                <!-- 这里的class加了背景条纹 -->
                <b-tr :class="{stripeMe:(index%2 == 1)}" :key="index">
                    <b-td :rowspan="item.val.length">{{ item.name }}</b-td>
                    <b-td>{{item.val[0].a1}}</b-td>
                    <b-td>{{item.val[0].a2}}</b-td>
                    <b-td>{{item.val[0].a3}} %</b-td>
                </b-tr>
                <b-tr  :class="{stripeMe:(index%2 == 1)}" v-for="(ele,idx) in item.val.length-1" :key="index+'-'+idx">
                    <b-td>{{item.val[ele].a1}}</b-td>
                    <b-td>{{item.val[ele].a2}}</b-td>
                    <b-td>{{item.val[ele].a3}} %</b-td>
                </b-tr>
            </template>
        
        </b-tbody>
        
    </b-table-simple>

</div>

 数据格式：

Data:[
        { 
          name:'fan1',
          val:[
              {a1: "front1",a2: "6056",a3: 25},
              {a1: "front2",a2: "6056",a3: 25},
          ]
        },{ 
          name:'fan2',
          val:[
              {a1: "front1",a2: "6056",a3: 25},
              {a1: "front2",a2: "6056",a3: 25},
              {a1: "front3",a2: "6056",a3: 25},
          ]
        },{ 
          name:'fan3',
          val:[
              {a1: "front1",a2: "6056",a3: 25},
              {a1: "front2",a2: "6056",a3: 25},
          ]
        },{ 
          name:'fan4',
          val:[
              {a1: "front1",a2: "6056",a3: 25},
          ]
        }
      ],