VUE + elementui複合ヘッダと2次元テーブルの列の動的増加を実現します

カラムは、クエリの結果に応じて増加されています。完成レンダリングの最初の

 データ形式：

 ヘッダデータを抽出します。

data.data.forEach（要素=> { 
          this.thead.push（{ 
            名：要素名。
            表面アクセス：要素表面アクセス。
            lotno：element.LOT 
          }）。

　要素テーブルの中：

      <EL-テーブル列の
        V-ため= "（項目、インデックス）THEADで" 
        ：プロペラ= "item.LOTNO" 
        ：キー= "インデックス" 
        整列= "中心" 
        幅= "180" 
      > 
        <テンプレートスロット= "ヘッダ「> 
          <TR> 
            <TD> {{アイテム。品名}} </ TD> 
          </ TR> 
          <TR> 
            <TD> {{アイテム。面取数}} </ TD> 
          </ TR> 
          <TR> 
            < TDする@クリック= "querylot（item.LOTNO）"> 
              <EL-リンク> {{item.LOTNO}} </ EL-リンク> 
            </ TD> 
          </ TR>
        </テンプレート> 
      </エル・テーブルのカラム>

　　データテーブル内の統合：

  （インデックス1 = 3 ;.せため index1の<Object.keys（ _data [0]）の長さの結果、インデックス1を、++）{ 
          ;新しい新しいNEWMAPマップ=（）させ
          ましょうDataKey = Object.keys（結果_data [0]）[index1の]; 
          newmap.set（ "MODE"、DataKey）; //各抽出されたキー配列オブジェクトのための
          （INDEX2 = 0せ; INDEX2ための < 結果_data_length; INDEX2 ++）{ 
            LET = DataValueはは_data [INDEX2結果] [オブジェクト.keys（[0] _dataをもたらす）[index1の、]]; 
            IF（DataKeyの== "入力日付"）{ 
              DataValueはdatavalue.slice =（0、10）; 
            } 
            newmap.set（
              結果_data [INDEX2] [オブジェクト.keys（結果_data [INDEX2]）[0] ]、DataValueは）; // すべてのキーの値が、対応する取得
          }

　　左組み合わせヘッダ：固定テーブルの列の最大高さ属性を設定する必要がある場合、なお、それ以外の場合は空白の列が存在することになります

    <EL-テーブル：データ= "たtableData" スパン方式= "objectSpanMethod">

objectSpanMethod（{行、列、rowIndexに、columnIndexに}）{ 
      IF（columnIndexに=== 0）{ 
        IF（rowIndexプロパティ％this.tableData.length === 0）{ 
          リターン{ 
            ROWSPAN：this.tableData.length、
            COLSPAN：1 
          }。
        }他{ 
          リターン{ 
            ROWSPAN：0、
            COLSPAN：0 
          }。
        } 
      } 
    }

　　エクスポートテーブル：

「ファイル・セーバー」からインポートFileSaver。
「XLSX」からインポートXLSX。
    出力（）{ 
      アラート（1）。
      聞かせてWB = XLSX.utils.table_to_book（document.querySelector（ "＃のmytableは"））; // MYTABLE为表格的識別名
      wbout = XLSX.writeを聞かせ（WB、{ 
        ブックタイプ： "XLSX" 
        bookSST：真、
        タイプ： "アレイ" 
      }）。
      {試みる
        FileSaver.saveAs（
          新たなBLOB（[wbout]、{タイプ： "アプリケーション/オクテットストリーム"}）、
          "sheet.xlsx" 
        ）。
      }キャッチ（E）{ 
        IF（typeof演算コンソール== "未定義"！）はconsole.log（E、wbout）。
      } 
      wbout返します。