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

先上效果图:

table循环实现表格相同列合并_第1张图片

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

template中:


    
{{table.indicatorType}}

注:其中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"
            }
          ]
        }
      ],

 

你可能感兴趣的:(Vue,Element)