vue中原生表格合并

1.源码

  <table
        border="1"
        cellspacing="0"
        cellpadding="0"
        class="student-info"
      >
        <template v-for="(item, index) in data.evalSubInfoList">
          <tr :key="index">
            <td class="tasksub-width-style font-style">评价属性</td>
            <td class="tasksub-width-style font-style">评价维度</td>
            <td class="font-style">{{ item.evalRole }}</td>
          </tr>
          <template v-for="element in item.evalInfo">
            <tr :key="element.id">
              <td :rowspan="element.dimenList.length" class="align-style">
                {{ element.propName }}
              </td>
              <td class="align-style">
                {{ element.dimenList[0].dimenName }}
              </td>
              <td>{{ element.dimenList[0].bzr }}</td>
            </tr>
            <tr v-for="(wd, i) in element.dimenList.length - 1" :key="wd.id">
              <td class="align-style">
                {{ element.dimenList[i + 1].dimenName }}
              </td>
              <td>
                {{ element.dimenList[i + 1].bzr }}
              </td>
            </tr>
          </template>
        </template>
      </table>

  data: {
        evalSubInfoList: [
          {
            evalRole: '班主任',
            evalInfo: [{
              propName: '属性属性1',
              dimenList: [{
                dimenName: '维度维度维度11',
                bzr: 'A'
              },
              {
                dimenName: '维度维度维度12',
                bzr: 'A'
              }
              ]
            }, {
              propName: '属性属性2',
              dimenList: [{
                dimenName: '维度维度维度21',
                bzr: 'A'
              },
              {
                dimenName: '维度维度维度22',
                bzr: 'A'
              }
              ]
            }]
          },
          {
            evalRole: '代课老师',
            evalInfo: [{
              propName: '属性属性3',
              dimenList: [{
                dimenName: '维度维度维度31',
                bzr: 'A'
              },
              {
                dimenName: '维度维度维度32',
                bzr: 'A'
              }
              ]
            }, {
              propName: '属性属性4',
              dimenList: [{
                dimenName: '维度维度维度41',
                bzr: 'A'
              },
              {
                dimenName: '维度维度维度42',
                bzr: 'B'
              }
              ]
            }]
          }
        ],
      

2.效果