table循环实现表格相同列合并

先上效果图：

实现代码：利用lb-element-table实现。

template中：

<el-card v-for="(table,index) in listData" :key="index" style="margin-bottom: 10px;">
    <div slot="header">
       <span>{{table.indicatorType}}</span>
    </div>
    <div>
       <lb-table :column="column" :data="table.tableData" :merge="['project']" border></lb-table>
    </div>
</el-card>

注：其中merge中的数组是你需要合并的列的属性名。

data中定义column：

column = [
        {
          prop: "project",
          label: "项目"
        },
        {
          prop: "indicatorName",
          label: "指标"
        }
      ];

data中定义tableData的值：

listData: [
        {
          indicatorType: "指标分类1",
          tableData: [
            {
              project: "工艺流程名称2",
              indicatorName: "指标名称2",
              name: "2019-01-01",
              value1: "8",
              value2: "90",
              value3: "14",
              value4: "14",
              value5: "10",
              value6: "17",
              value7: "1",
              unit: "kg"
            },
            {
              project: "工艺流程名称2",
              indicatorName: "指标名称2",
              name: "2019-01-02",
              value1: "10",
              value2: "1",
              value3: "140",
              value4: "100",
              value5: "10",
              value6: "14",
              value7: "10"
            },
            {
              project: "工艺流程名称3",
              indicatorName: "指标名称2",
              name: "2019-01-02",
              value1: "10",
              value2: "10",
              value3: "10",
              value4: "10",
              value5: "10",
              value6: "10",
              value7: "10"
            },
            {
              project: "工艺流程名称3",
              indicatorName: "指标名称2",
              name: "2019-01-03",
              value1: "10",
              value2: "10",
              value3: "10",
              value4: "10",
              value5: "10",
              value6: "10",
              value7: "10"
            },
            {
              project: "工艺流程名称4",
              indicatorName: "指标名称2",
              value1: "10",
              value2: "10",
              value3: "10",
              value4: "10",
              value5: "10",
              value6: "10",
              value7: "10"
            }
          ]
        },
        {
          indicatorType: "指标分类2",
          tableData: [
            {
              project: "工艺流程名称6",
              indicatorName: "指标名称2",
              name: "2019-01-01",
              value1: "10",
              value2: "1",
              value3: "10",
              value4: "10",
              value5: "102",
              value6: "107",
              value7: "1",
              unit: "kg"
            },
            {
              project: "工艺流程名称6",
              indicatorName: "指标名称2",
              name: "2019-01-02",
              value1: "10",
              value2: "106",
              value3: "10",
              value4: "10",
              value5: "106",
              value6: "10",
              value7: "10"
            },
            {
              project: "工艺流程名称6",
              indicatorName: "指标名称2",
              name: "2019-01-02",
              value1: "106",
              value2: "10",
              value3: "10",
              value4: "10",
              value5: "10",
              value6: "10",
              value7: "106"
            },
            {
              project: "工艺流程名称7",
              indicatorName: "指标名称2",
              name: "2019-01-03",
              value1: "10",
              value2: "10",
              value3: "10",
              value4: "106",
              value5: "10",
              value6: "10",
              value7: "10"
            },
            {
              project: "工艺流程名称7",
              indicatorName: "指标名称2",
              value1: "10",
              value2: "10",
              value3: "1",
              value4: "10",
              value5: "10",
              value6: "10",
              value7: "10"
            }
          ]
        }
      ],