table 表单合并

说明	使用
竖向合并	rowspan=“2”
横向合并	colspan=“2”

<!--  rowspan="2"  竖向合并   colspan="2" 横向合并 -->
<template>
  <div class="">
    <table border="1px" style="border-spacing: 0px; border: 1px solid #333">
      <thead>
        <tr>
          <th v-for="(i, num) in tabHeader" :key="num + 2" class="tabHeader">
            {{ i.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-for="i in tabContent">
          <template v-for="(g, _index) in i.content">
            <tr :key="_index + i.name">
              <td
                v-if="_index == 0"
                class="colHead"
                :rowspan="i.content.length"
              >
                {{ i.curve }}
              </td>
              <td>
                {{ g.name }}
              </td>
              <td>
                {{ g.address }}
              </td>
              <td>
                {{ g.num }}
              </td>
              <td>
                {{ g.phone }}
              </td>
            </tr>
          </template>
        </template>
      </tbody>
    </table>
    <div></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tabHeader: [
          {
            label: '所属区县',
          },
          {
            label: '新就业形态工会组织名称',
          },
          {
            label: '地址',
          },
          {
            label: '网约车泊车数量',
          },
          {
            label: '联系方式',
          },
        ],
        tabContent: [
          {
            curve: '上城区',
            content: [
              {
                name: '123',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
              {
                name: '345',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
            ],
          },
          {
            curve: '上城区',
            content: [
              {
                name: '456',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
              {
                name: '789',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
              {
                name: '123',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
            ],
          },
          {
            curve: '上城区',
            content: [
              {
                name: '234',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
              {
                name: '456',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
              {
                name: '567',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
              {
                name: '789',
                address: '仁和路',
                num: '有',
                phone: '999999',
              },
            ],
          },
        ],
      }
    },
    mounted() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  table {
    font-size: 16px;
  }
</style>