如何实现动态表格布局？

Question

就是现在要想实现动态表格布局，数据是根据后端传来的数据显示的，需要将相同的行和列进行动态合并用el-row和el-col，但是后台返回的数据都是一条一条独立的，我现在想将数据进行更改

"trContentVOList": [
        {
          "jieguo": "√",
          "jianyanxiangmu": "1)锅炉日常运行记录是否齐全",
          "beizhu": "备注",
          "jianyanneirong1": "null",
          "jianyanneirong": "安全管理情况"
        },
        {
          "jieguo": "√",
          "jianyanxiangmu": "2)锅炉图样、产品质量说明书、使用说明书、检验证书、检验报告及维修、改造资料是否齐全",
          "beizhu": "null",
          "jianyanneirong1": "null",
          "jianyanneirong": "安全管理情况"
        },
        {
          "jieguo": "---",
          "jianyanxiangmu": "3)上次检验报告中所提出的问题是否解决",
          "beizhu": "null",
          "jianyanneirong1": "null",
          "jianyanneirong": "安全管理情况"
        },
        {
          "jieguo": "√",
          "jianyanxiangmu": "1)测温仪表的量程与其检测的温度范围的匹配情况",
          "beizhu": "null",
          "jianyanneirong1": "温度测量装置",
          "jianyanneirong": "安全附件和仪表"
        },
        {
          "jieguo": "√",
          "jianyanxiangmu": "2)测温仪表的外观情况",
          "beizhu": "null",
          "jianyanneirong1": "温度测量装置",
          "jianyanneirong": "安全附件和仪表"
        },
        {
          "jieguo": "√",
          "jianyanxiangmu": "3)温度仪表是否在检验或校准有效期内",
          "beizhu": "null",
          "jianyanneirong1": "温度测量装置",
          "jianyanneirong": "安全附件和仪表"
        },
        {
          "jieguo": "√",
          "jianyanxiangmu": "4)螺纹固定的测温元件的泄漏情况",
          "beizhu": "null",
          "jianyanneirong1": "温度测量装置",
          "jianyanneirong": "安全附件和仪表"
        },
        {
          "jieguo": "√",
          "jianyanxiangmu": "1)安全阀是否在检验有效期",
          "beizhu": "null",
          "jianyanneirong1": "安全阀",
          "jianyanneirong": "安全附件和仪表"
        },
        {
          "jieguo": "√",
          "jianyanxiangmu": "2)安全阀阀体和法兰面是否泄漏",
          "beizhu": "null",
          "jianyanneirong1": "安全阀",
          "jianyanneirong": "安全附件和仪表"
      }"

下面是我想要实现的功能图片

Answer 1

随便写了一下没有怎么写样式，可以根据我的代码调整一个样式

<template>
  <table>
    <thead>
      <tr>
        <th colspan="2">检验内容</th>
        <th>检验项目</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td v-if="item.jianyanneirong" :colspan="item.jianyanneirong1 === 'null' ? 2 : 1" :rowspan="item.row">
          {{ item.jianyanneirong }}
        </td>
        <td v-if="item.jianyanneirong1 !== 'null'" :rowspan="item.row">
          {{ item.jianyanneirong1 }}
        </td>
        <td>{{ item.jianyanxiangmu }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  data() {
    return {
      data: [{
        'jieguo': '√',
        'jianyanxiangmu': '1)锅炉日常运行记录是否齐全',
        'beizhu': '备注',
        'jianyanneirong1': 'null',
        'jianyanneirong': '安全管理情况'
      },
      {
        'jieguo': '√',
        'jianyanxiangmu': '2)锅炉图样、产品质量说明书、使用说明书、检验证书、检验报告及维修、改造资料是否齐全',
        'beizhu': 'null',
        'jianyanneirong1': 'null',
        'jianyanneirong': '安全管理情况'
      },
      {
        'jieguo': '---',
        'jianyanxiangmu': '3)上次检验报告中所提出的问题是否解决',
        'beizhu': 'null',
        'jianyanneirong1': 'null',
        'jianyanneirong': '安全管理情况'
      },
      {
        'jieguo': '√',
        'jianyanxiangmu': '1)测温仪表的量程与其检测的温度范围的匹配情况',
        'beizhu': 'null',
        'jianyanneirong1': '温度测量装置',
        'jianyanneirong': '安全附件和仪表'
      },
      {
        'jieguo': '√',
        'jianyanxiangmu': '2)测温仪表的外观情况',
        'beizhu': 'null',
        'jianyanneirong1': '温度测量装置',
        'jianyanneirong': '安全附件和仪表'
      },
      {
        'jieguo': '√',
        'jianyanxiangmu': '3)温度仪表是否在检验或校准有效期内',
        'beizhu': 'null',
        'jianyanneirong1': '温度测量装置',
        'jianyanneirong': '安全附件和仪表'
      },
      {
        'jieguo': '√',
        'jianyanxiangmu': '4)螺纹固定的测温元件的泄漏情况',
        'beizhu': 'null',
        'jianyanneirong1': '温度测量装置',
        'jianyanneirong': '安全附件和仪表'
      },
      {
        'jieguo': '√',
        'jianyanxiangmu': '1)安全阀是否在检验有效期',
        'beizhu': 'null',
        'jianyanneirong1': '安全阀',
        'jianyanneirong': '安全附件和仪表'
      },
      {
        'jieguo': '√',
        'jianyanxiangmu': '2)安全阀阀体和法兰面是否泄漏',
        'beizhu': 'null',
        'jianyanneirong1': '安全阀',
        'jianyanneirong': '安全附件和仪表'
      }]
    }
  },
  created() {
    const obj = {}
    this.data = this.data.map((item) => {
      console.log(obj[item.jianyanneirong + item.jianyanneirong1], 'obj[item.jianyanneirong + item.jianyanneirong1]')
      if (obj[item.jianyanneirong + item.jianyanneirong1]) {
        obj[item.jianyanneirong + item.jianyanneirong1] = ++obj[item.jianyanneirong + item.jianyanneirong1]
        item.jianyanneirong = ''
        item.jianyanneirong1 = 'null'
      } else {
        obj[item.jianyanneirong + item.jianyanneirong1] = 1
      }
      console.log(obj, item.jianyanneirong, item, 'item')
      return item
    })
    this.data = this.data.map(item => {
      if (obj[item.jianyanneirong + item.jianyanneirong1]) { item.row = obj[item.jianyanneirong + item.jianyanneirong1] }
      return item
    })
    console.log(this.data, 'data')
  }
}
</script>
<style lang="scss" scoped>
table {
  margin-top: 100px;
}
td {
  border: 1px solid #000;
}
</style>