原生table表格实现行合并，列合并

1、效果图

2、源码实现

<template>
  <div>
    <table border="1" center style="margin:200">
      <tbody>
        <tr v-for="(item, index) in originData" :key="index">
          <td rowspan="4">法定代表人</td>
          <td rowspan="4">{{ item.legalPerson }}</td>
          <td>经营状态</td>
          <td>{{ item.unifySocialCreditCodes }}</td>
          <td rowspan="2">工商注册号</td>
          <td rowspan="2">{{ item.businessTerm }}</td>
        </tr>
        <tr v-for="(item, index) in originData" :key="index">
          <td>成立日期</td>
          <td>{{ item.businessTerm }}</td>
        </tr>
        <tr v-for="(item, index) in originData" :key="index">
          <td>注册资本</td>
          <td>{{ item.businessTerm }}</td>
          <td rowspan="2">组织机构代码</td>
          <td rowspan="2">{{ item.businessTerm }}</td>
        </tr>
        <tr v-for="(item, index) in originData" :key="index">
          <td>实缴资本</td>
          <td>{{ item.businessTerm }}</td>
        </tr>

        <tr v-for="(item, index) in originData" :key="index">
          <td>统一社会信用代码</td>
          <td>{{ item.businessTerm }}</td>
          <td>纳税人识别号</td>
          <td>{{ item.businessTerm }}</td>
          <td rowspan="2">核准日期</td>
          <td rowspan="2">{{ item.businessTerm }}</td>
        </tr>
        <tr v-for="(item, index) in originData" :key="index">
          <td>营业期限</td>
          <td>{{ item.businessTerm }}</td>
          <td>纳税人资质</td>
          <td>{{ item.businessTerm }}</td>
        </tr>
        <tr v-for="(item, index) in originData" :key="index">
          <td>统一社会信用代码</td>
          <td>{{ item.businessTerm }}</td>
          <td>纳税人识别号</td>
          <td>{{ item.businessTerm }}</td>
          <td rowspan="2">人员规模</td>
          <td rowspan="2">{{ item.businessTerm }}</td>
        </tr>
        <tr v-for="(item, index) in originData" :key="index">
          <td>营业期限</td>
          <td>{{ item.businessTerm }}</td>
          <td>纳税人资质</td>
          <td>{{ item.businessTerm }}</td>
        </tr>

        <tr v-for="(item, index) in originData" :key="index">
          <td>注册地址</td>
          <td colspan="5">{{ item.businessTerm }}</td>
        </tr>
        <tr v-for="(item, index) in originData" :key="index">
          <td style="height: 60px;">经营范围</td>
          <td colspan="5" style="height: 60px;">{{ item.businessTerm }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<style>
table {
  border-collapse: collapse;
  text-align: center;
}
td {
  min-width: 100px;
  padding: 4px 10px;
  height: 30px;
}
</style>
<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      size: "",
      flag: false,
      // originData 为后端原始正常的数据, 此数据按正常表格展示 一行一行的数据
      // 保证数组里每一个对象中的字段顺序, 从上到下 一次对应显示表格中的从左到右
      originData: [
        {
          legalPerson: "1",
          unifySocialCreditCodes: "1",
          businessTerm: "1",
          enterpriseOfType: "1",
          contributorsNum: "1",
          registeredAddress: "1",
          scopeOfBusiness: "1",
          operateState: "1",
          dateOfPublish: "1",
          registeredCapital: "1",
          contributedCapital: "1",
          taxIdentifyNum: "1",
          taxQualification: "1",
          industry: "1",
          registerAuthority: "1",
          businessRegisterNum: "1",
          organizationCode: "1",
          approvDate: "1",
          staffSize: "1",
        },
      ],

      // originTitle 该标题为 正常显示的标题, 数组中的顺序就是上面数据源对象中的字段标题对应的顺序
      originTitle: [
        "法定代表人",
        "统一社会信用代码",
        "营业期限",
        "企业类型",
        "参保人数",
        "注册地址",
        "经营范围",
        "经营状态",
        "成立日期",
        "注册资本",
        "实缴资本",
        "纳税人识别号",
        "纳税人资质",
        "行业",
        "登记机关",
        "工商注册号",
        "组织机构代码",
        "核准日期",
        "人员规模",
      ],
    };
  },
  created() {},
};
</script>