----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.最后展示一下實現的效果