----vue实现复杂表格的合并与展示----

1.import LbTable from '@/components/lb-table/lb-table'(ps:LbTable是接触element-ui 表格的二次封装。官方网址：https://github.liubing.me/lb-element-table/zh/guide/#%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8；git地址：https://github.liubing.me/lb-element-table/zh/guide/)

2.

 

merge属性是根据哪几个字段去合并的一个数组

3.将后台返回的多维数组通过递归转成一维数组

formData() {
      let flag = this.dataTable.every(item => !item.businessDataProjectDtoList);
      if (flag) {
        // this.initData();
        return;
      }
      let data = [];
      this.dataTable.forEach(element => {
        if (
          element.businessDataProjectDtoList &&
          element.businessDataProjectDtoList.length
        ) {
          element.businessDataProjectDtoList.forEach((item, index, array) => {
            delete element.businessDataProjectDtoList;
            item = {
              ...item,
              ...element
            };
            data.push(item);
          });
        } else {
          data.push(element);
        }
      });
      this.dataTable = data;
      console.log(this.dataTable, "this.dataTablethis.dataTable");
      this.formData();
    },

　4.设置绑定的column属性

　　

tableData2: {
        column: [
          {
            prop: "orderNumber",
            label: "收银金额",
            render(h, scope) {
              return <span>{scope.row.openOrderMoney}</span>;
            }
          },
          {
            label: "实收",
            children: [
              {
                prop: "orderNumber",
                label: "总计",
                render(h, scope) {
                  return <span>{scope.row.openOrderMoney}</span>;
                }
              },
              {
                prop: "orderNumber",
                label: "微信",
                render(h, scope) {
                  return <span>{scope.row.openOrderMoney}</span>;
                }
              },
              {
                prop: "orderNumber",
                label: "支付宝",
                render(h, scope) {
                  return <span>{scope.row.openOrderMoney}</span>;
                }
              }
            ]
          },

　5.最后展示一下实现的效果