vue+table实现表格动态合并

<template>
  <div>
    <table>
      <thead>
        <th>ID</th>
        <th>所属部门</th>
        <th>姓名</th>
        <th>年龄</th>
      </thead>
      <tbody>
        <template v-for="(item,num) in tableData">
          <tr :key="num+'-'+'1'">
            <td :rowspan="item.rowSpanData.length * item.rowSpanData[0].data.length">{{item.rowSpanName}}</td>
            <td :rowspan="item.rowSpanData[0].data.length">{{item.rowSpanData[0].value01}}</td>
            <td>bb</td>
            <td>bb</td>
          </tr>
          <tr v-for="(ele,inx) in item.rowSpanData[0].data.length-1" :key="num+'--'+inx">
            <td>s</td>
            <td>s</td>
          </tr>
          <template v-for="(te,index) in item.rowSpanData.length-1">
            <tr :key="index+'-'+'2'">
              <td :rowspan="item.rowSpanData[0].data.length">{{item.rowSpanData[0].value01}}</td>
              <td>bb</td>
              <td>bb</td>
            </tr>
            <tr v-for="(ele,inx) in item.rowSpanData[0].data.length-1" :key="index+'-'+inx">
              <td>s</td>
              <td>s</td>
            </tr>
          </template>
        </template>

      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[
        {
          rowSpanName:'一级菜单',
          rowSpanData:[
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
            {
              value01:"二级菜单",
              data:[{value:"a"},{value:"a"}]
            },
          ]
        }
      ]
    }
  },
}
</script>

<style lang="less" scoped>
  table{
    tr{
      td{
        border: 1px solid black;
      }
    }
  }
</style>

关键在与:key不能重

 

来源：https://wenku.baidu.com/view/1f62a33451d380eb6294dd88d0d233d4b14e3f7e.html